Перерисовать родительский компонент при изменении свойства, вызванного дочерним - PullRequest
Новая
       23

Перерисовать родительский компонент при изменении свойства, вызванного дочерним

0 голосов
/ 05 июня 2018

Я довольно новичок в 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 родителя является единичным и теоретически передается всем детям.

What I 'мы пробовали

Я также пытался использовать ngOnChanges в дочернем компоненте , как упомянуто здесь , и использовать changeDetection свойство , как упомянуто здесь но ни один не работал.Кажется, проблема в родителе. Я также пытался использовать @Input() в родительском компоненте вместо свойства text.

Я почти уверен, что упускаю что-то простое, но не могу понять, что именно.Когда text изменяется, я хочу видеть это в DOM, и если я использую 10 input-text компонентов, которые передаются с тем же свойством text, я ожидаю, что все они отображают это.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы также можете использовать функцию стрелки в вашем 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
    }
}
0 голосов
/ 05 июня 2018

Хорошо, все было просто, как я и ожидал.Я просматривал этот ответ как обходной путь и заметил, что в родительской функции onChange он не распознает this.chRef или другие свойства.

Так что я сразу понял, что не правильно связывал свою функцию.Поэтому я изменил родительский шаблон, чтобы он содержал 

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

, и теперь он работает правильно.

Тем не менее, если у вас есть предложения относительно того, как можно улучшить этот код, пожалуйста, сообщите мне.

...