Force thay đổi @input ở component con trong Angular

TIL

770

angular

14

DailyNote

10

Vani viết ngày 09/02/2018

Các @Input ở component con chỉ khởi tạo giá trị ban đâu, do đó, các biến ở component cha thay đổi thì các @Input ở component con sẽ không thay đổi theo.

Để bắt buộc @input ở component con thay đổi khi biến ở component cha thay đổi, ta dùng life circle : ngOnChanges

Ở coponent con:

export class ChildComponent implements OnInit, OnChanges {
    @Input() keyword: string;
     ngOnInit() {
    }
    ngOnChanges(changes) {
        if (changes['keyword']) {
            this.keyword = changes['keyword'].currentValue;
        }
    }
}

Ở component cha:

@Component({
    template: `<child-component [keyword] ="searchKeyword"></child-component>`
})
export class ParentComponent {
    searchKeyword: string;
   onClickBtn() {
    this.searchKeyword = 'Hello world';
   }
}

...

Vani
07-02-2018