在 angular 中以编程方式获取和设置子组件的值

Question

我正在创建一个基于 ionic、angular 和 html5 的棋盘游戏。 我创建了两个组件 app-board 和 app-square。 app-square 是 app-board 组件的子组件。 app-square 组件具有以下属性

      @Input() count: number = 0;
      @Input() type: string ="";
      coins(){
        return new Array(this.count);
      }
      setValue(own: string): boolean{//some code here}

board.component.html 为几个

<app-square (click)="makeMove(this)" [count]="3"></app-square>

board.component.ts 如下

makeMove(obj){
    console.log(obj);
  }

当点击 app-square 时，它会触发 board.component 中的 makeMove 方法。 我的问题是如何从板组件的 makeMove 方法中设置或获取子组件的属性？

Answer 1

<app-square (click)="makeMove(this)" [count]="3"></app-square>

不是您想要的，因为this指的是封闭组件，即app-board 。 只是为了说明问题， <app-square (click)="makeMove(this)">实际上是<app-square (click)="this.makeMove(this)">的简写。

要获得所需的行为，请将<app-square>传递给app-board的 make move，您可以声明对组件的引用并将其传递给方法

<app-square #square (click)="makeMove(square)" [count]="3"></app-square>

@Component({ //...boilerplate and ceremony})
export class BoardComponent {
  makeMove(square: SquareComponent) {
    console.log(square);
  }
}