代码之家 › 专栏 › 技术社区 › Raul Rene

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

angular2-changedetection angular2-components angular

1

Raul Rene · 技术社区 · 8 年前

我对角度很陌生 尝试构建一些可重用的组件 ,例如输入文本组件。我想用各种内置方法、验证、相关标签和错误标签等来定制它。

我基本上做到了。 我现在想要达到的目标 是在属性更改时重新呈现父组件(以及所有子组件)。

我要回电话 在父级中触发并将值分配给文本属性,但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 属性,但模板消息不会更改。

我基本上是想制造一个不受控制的组件,模拟反应。另外,如果我再加上 input-text 孩子们他们不共享相同的文本,尽管父母 文本 属性是一个单独的属性,理论上是传递给所有子级的。

我试过的

我也试过用 ngOnChanges 在子组件中 as mentioned here 使用 changeDetection 财产 as mentioned here 但都不管用。问题似乎出在父母身上我也试过用 @Input() 在父组件中,而不是在文本属性中。

我很确定我遗漏了一些简单的东西,但不知道是什么。什么时候? 文本 我想在dom中看到这些变化,如果我使用10 输入文本 通过相同的组件 文本 我希望他们都能展示出来。

2 回复 | 直到 8 年前

1

Raul Rene 8 年前

好吧,就像我预料的那样简单。我是 looking over this answer 作为权宜之计注意到在父母身上 onChange 它无法识别的功能 this.chRef 或其他财产。

所以我立刻意识到我没有正确地约束自己的功能。所以我更改了父模板以包含

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

现在一切正常了。

不过,如果你对如何改进这段代码有建议,请告诉我。

2

0

Mohamed Gara 8 年前

也可以在父组件中使用箭头函数,如下所示:

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