在子组件触发的属性更改时重新呈现父组件

Question

我对 Angular 很陌生，我正在尝试构建一些可重用的组件，例如输入文本组件。我想使用各种内置方法、验证、关联标签和错误标签等来自定义它。

我基本上都设法做到了。我现在要实现的是，在属性更改时重新呈现父组件(以及隐式的所有子组件(。

我正在父级中触发回调并将值分配给我的文本属性，但 DOM 不会使用新值更新。

父组件

import { Component, Input } from '@angular/core';
@Component({
selector: 'parent',
template: '<input-text [text]="text" [onChange]="onChange"></input-text> <p>The text is now {{text}}</p>'
})
export class ParentComponent {
text: string;
onChange($text) {
this.text = $text;
console.log('onChange', this.text); // <-- it gets here on child input
}
}

输入文本 - 子组件

import { Component, Input } from '@angular/core';
@Component({
selector: 'input-text',
template: '<input type="text" [(ngModel)]="text" (ngModelChange)="onChange($event)" [value]="text"/>',
})
export class InputTextComponent {
@Input() text: string;
@Input() onChange: Function;
}

所以就是这样。写入子组件会触发父组件的onChange函数，我更新了text属性，但模板消息没有更改。

我基本上是在尝试创建一个不受控制的组件，类似于 React。此外，如果我添加更多input-text子项，它们不会共享相同的文本，尽管父项的text属性是单个属性，理论上会传递给所有子属性。

我尝试过什么

我还尝试在子组件中使用ngOnChanges，如此处所述，并使用此处提到的changeDetection属性，但都没有奏效。问题似乎出在父级 我还尝试在父组件中使用@Input()而不是文本属性。

我很确定我错过了一些简单的东西，但无法弄清楚是什么。 当text更改时，我希望在 DOM 中看到这一点，如果我使用 10 个传递相同text属性的input-text组件，我希望它们都显示它。

Answer 1

好的，就像我预期的一样简单。我正在查看此答案作为解决方法，并注意到在父onChange函数中它无法识别this.chRef或其他属性。

所以我立即意识到我没有正确绑定我的功能。所以我将父模板更改为包含

[onChange]="onChange.bind(this)"

它现在工作正常。

不过，如果您对如何改进此代码有建议，请告诉我。

Answer 2

您还可以在 ParentComponent 中使用箭头函数，如下所示：

@Component({
selector: 'parent',
template: '<input-text [text]="text" [onChange]="onChange"></input-text> <p>The text is now {{text}}</p>'
})
export class ParentComponent {
text: string;
onChange = ($text) => {
this.text = $text;
console.log('onChange', this.text); // <-- it gets here on child input
}
}