Question

我有这个组件：

import { Component, Input} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input type="checkbox" id="1" [checked]="ck">`,
})
export class AppComponent implements OnChanges  {
  @Input()
  ck=true;
  ngOnChanges(changes: SimpleChanges){
    alert(2);
  }
}

如果我将ck=true更改为ck=false，则会重新选中该网站，而未选中（反之亦然）。它让我认为它显示正确。

但是警报从未发出。

编辑

添加了评论中建议的@Input()。

Answer 1

ng-OnChange用于组件外部的事件，用于“输入”参数。

https://stackblitz.com/edit/angular-ng-on-change-and-checkbox?embed=1&file=src/app/app.component.ts

如果要触发某些方法，请进行更改方法：

<input type="checkbox" id="1" [checked]="ck" (change)="change()">

并使用ngModel获得价值

@Component({
  selector: 'my-checkbox',
  template: `<input type="checkbox" id="1" [(ngModel)]="ck" (change)="change()">`,
})
export class MyCheckbox implements OnChanges  {
  @Input()
  ck=true;
  ngOnChanges(changes: SimpleChanges){
    console.log("2");
  }

  change(){
    console.log(this.ck);
  }

}

复选框未调用ngOnChanges

编辑

1 个答案: