Angular 角变法

我是Angular的新手，最近一直在研究组件Lifehook，但我对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;

@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}`);
        }
    }

}

你可以这样说：

<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（）。因此，如果组件没有父级，则不会调用ngOnChanges（）

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

@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}`);
        }
    }

}