Re-render parent 组件属性更改由 child 触发

Question

我是 Angular 的新手，我正在 尝试构建一些 re-usable 组件 ，例如输入文本组件。我想使用各种 built-in 方法、验证、关联标签和错误标签等对其进行自定义

我基本上做到了。 我现在正在尝试实现的是re-render parent 组件（以及所有 children 隐含地）当属性已更改。

我正在 parent 中触发回调 并将值分配给我的 text 属性，但 DOM 不会更新为新值。

Parent 组件

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
    }
}

输入文本 - Child 组件

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;
}

就是这样。在child组件中写入触发了parent的onChange函数，我更新了text属性但是模板消息并没有改变。

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

我试过的

我也试过在 child 组件 and to use the changeDetection property 中使用 ngOnChanges 但都没有用。问题似乎在 parent 我还尝试在 parent 组件中使用 @Input() 而不是文本属性.

我很确定我错过了一些简单的东西，但无法弄清楚是什么。当 text 发生变化时，我想在 DOM 中看到它，如果我使用 10 个 input-text 组件，这些组件通过了相同的 text 属性我希望所有其中有显示。

Answer 1

好的，正如我预期的那样简单。我将 looking over this answer 作为一种解决方法，并注意到在父 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
    }
}

Re-render parent 组件属性更改由 child 触发

Re-render parent component on property change triggered by child

angular2-changedetection

angular2-components

angular

Re-render parent 组件 属性 更改由 child 触发

Re-render parent component on property change triggered by child

angular2-changedetection

angular2-components

angular

Re-render parent 组件属性更改由 child 触发