Angular 2 @Input 经常被调用

Question

我正在使用 Angular 2，我正在使用一些 getter 和 setter 在组件之间进行通信。我遇到了 getter 和 setter 函数运行很多次的问题，即使它们不依赖于任何东西。我做错了什么吗？

对于 getter 函数，我只有这段代码:

 private get SomeData(): string {
        console.log("Getter called");
        return "some string";
 }

setter 代码是:

@Input()
public set SomeData(newData: string) {
    console.log("Setter called");
}

绑定(bind)是:

<child-comp [SomeData]="SomeData"></child-comp>

控制台显示 Getter called、Setter called，然后打印大约 20 行 Getter called。为什么叫这些？

Answer 1

问题是由

引起的

private get SomeData(): string {
    console.log("Getter called");
    return "some string";
}

因为每次变更检测检查值是否发生变化时都会返回一个新的字符串实例

如果您将代码更改为

private someData:string = "some string";
private get SomeData(): string {
    console.log("Getter called");
    return this.someData;
}

然后每次都会返回相同的字符串实例，Angular 将其识别为未更改，除非 someData 已更改，否则不会调用 setter。