Question

我是Angular的新手，我尝试构建一些可重用的组件，例如输入文本组件。我想用各种内置方法，验证，相关标签和错误标签等来自定义它。

我已经成功了。 我正在尝试实现的目标是在更改属性时重新呈现父组件（以及所有子项）。

我在父级中触发回调并将值分配给我的 text 属性，但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属性是一个属性，理论上会传递给所有孩子。

我尝试了什么

我还尝试在子组件as mentioned here中使用ngOnChanges并使用changeDetection属性as mentioned here，但都没有效果。问题似乎出现在父母身上我还尝试在父组件中使用@Input()代替text属性。

我很确定我错过了一些简单但却无法弄清楚的东西。当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
    }
}

由子

2 个答案: