angular - Angular - 如何将 React 接口移植到 @Input 装饰器中

Question

这是我在 React 中尝试移植到 Angular 的内容（剥离了一些代码）：

interface IProps {
    xs: any;
    height: string;
    stat: Stat;
    statSchema: StatSchema;
    team?: Team;
    activePlayers?: Player[];
    subStatTitle?: string;
    requestMatchAction: (mar: MatchActionRequest) => void;
}

interface IState {
    selectedSubStatId?: string;
    selectSubStatOpen: boolean;
    selectPlayerOpen: boolean;
    success: boolean;
}

class BasicStatControl extends React.PureComponent<IProps, IState> {
    public state: IState = {
        selectSubStatOpen: false,
        selectPlayerOpen: false,
        success: true
    };

我想做的是在 Angular 中创建一个评分界面。我已经创建了一个 React 版本，但我需要将它移植到 Angular（顺便说一句，我是 Angular 的新手）。最终目标是有两个按钮（Field Goal Made / Field Goal Attempted）在按钮点击时打开一个对话框/模式。对话框/模态将是球员列表或子统计（例如，指定 2 分投篮是上篮、扣篮、跳投）。

如果我错了，请纠正我，但似乎 React 的接口 IProps 的实现等效于 Angular 的 @Input 装饰器。我试了一下，想出了这个。

@Component({
  selector: 'nvo-basic-stat-control',
  templateUrl: './basic-stat-control.component.html',
  styleUrls: ['./basic-stat-control.component.css']
})
export class BasicStatControlComponent {
  @Input() height: string;
  @Input() stat: Stat;
  @Input() statSchema: StatSchema;
  @Input() team?: Team;
  @Input() activePlayers?: Player[];
  @Input() subStatTitle?: string;
  @Output() requestMatchAction = new EventEmitter();

  @Input() selectedSubStatId?: string;
  @Input() selectSubStatOpen: boolean;
  @Input() selectPlayerOpen: boolean;
  @Input() success: boolean;
  constructor() {}
}

我认为这不是正确的实现，因为我刚刚编写了所有属性，但是无法区分结构（在 React 应用程序中，一组特定的属性分别定义/绑定到 IProps 和 IState） . 解决这个问题的正确方法是什么？

另外，React 的 this.props 的 Angular 等价物是什么？感谢任何指导/方向。谢谢！

标签： angularreactjstypescript