角ngOnChanges法

Question

我是新的角，我一直在学习组件LifeHooks最近，我真的不了解一件事关于ngOnChanges。它是否只在子组件上触发？如果我使用这样的代码: app.component.ts：

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [Logger]
})
export class AppComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
    title = 'Tour of Heroes';
    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
    myHero = this.heroes[0];
    hero: string;
    power: string;

模板链接如下：

<input [(ngModel)]="hero" placeholder="Hero name">
<input [(ngModel)]="power" placeholder="Hero power">

 <!--Using [] brackets can set property of COMPONENT or html ELEMENT-->
<app-on-changes [hero]="hero" [power]="power"></app-on-changes>

它触发子ngOnChanges方法，但是当我在子模板中使用输入绑定时，该方法不会被调用。-更改：

<p>
  <input [(ngModel)]="hero" placeholder="Hero name">
  <input [(ngModel)]="power" placeholder="Hero power">

  {{hero}}  {{power}}
</p>

打开-更改。组件。on：

@Component({
    selector: 'app-on-changes',
    templateUrl: './on-changes.component.html',
    styleUrls: ['./on-changes.component.css'],
    providers: [Logger]
})
export class OnChangesComponent implements OnInit, OnChanges {
    @Input() hero: string;
    @Input() power: string;
    constructor(private logger: Logger) {
    }

    ngOnInit() {
    }

    ngOnChanges(changes: SimpleChanges): void {
        this.logger.log('OnChangeComponent changed properties');

        for (let propName in changes) {
            let chng = changes[propName];
            let cur  = JSON.stringify(chng.currentValue);
            let prev = JSON.stringify(chng.previousValue);
            this.logger.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
        }
    }

}

Answer 1

当父组件修改(或初始化)绑定到子元素的输入属性的值时，将调用ngOnChanges()。因此，如果组件没有父组件，则不会调用ngOnChanges()。

您正在使用双向绑定更改@Input属性的值，但这不会调用ngOnChanges()。