Question

在角度中有一个名为ngOnChanges的方法。我试图了解这一点，我尝试使用此代码。但我没有得到任何输出。

任何人都帮我理解？

这是我的代码：

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { StorageService } from '../shared/service/storage.service';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {

    link = {};

    constructor(private storage:StorageService) {
        setTimeout(()=> {
            this.link = "ariffff";
        }, 1000 );
        // console.log( this.storage.name);
    }

    ngOnInit() {}

    ngOnChanges(changes) {
      console.log(this.link, changes); //getting nothing
    }

}

Answer 1

使用方法：

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
 @Input()
 prop: number;

 ngOnChanges(changes: SimpleChanges) {
// changes.prop contains the old and the new value...
 }
}

<强>描述

在数据绑定属性之后立即调用
ngOnChanges 已经检查过，在查看和内容子项之前，如果在其中至少有一个发生了变化。 changes参数包含改变了属性。

来自https://angular.io/api/core/OnChanges

Answer 2

每https://angular.io/api/core/OnChanges：

当指令的任何数据绑定属性发生更改时调用的生命周期钩子。

进一步说明：组件是指令的子集（https://angular.io/api/core/Component）。因此，例如，如果您有一个子组件，其输入prop更改，则调用该函数。由于您的Component没有正在更改的数据绑定属性，因此不会调用ngOnChanges()。

顺便说一下，优良作法是实现OnChanges接口：

class MyComponent implements OnChanges

`ngOnChanges`需要澄清以解决问题

2 个答案: