Trong angular2, cách nhận được cácThay đổi đối với các thuộc tính được thay đổi trên một đối tượng được gửi cho một @Input

Question

Tôi có chỉ thị và trên đó là một số @Input chấp nhận một lớp.

@Directive({selector: 'my-directive'}) 
@View({directives: [CORE_DIRECTIVES]}) 
export class MyDirective { 
    @Input() inputSettings : SettingsClass; 
    @Input() count : number; 

    onChanges(map) { 
     console.log('onChanges'); 
    } 
} 

Chỉ thị được sử dụng trong html:

... 
    <my-directive [input-settings]="settings" [count]="settings.count"></my-directive> 
    ... 

Nếu settings.count được thay đổi thì onChanges sẽ cháy. Nếu bất kỳ thuộc tính nào khác trên lớp cài đặt thay đổi, thì nó sẽ không kích hoạt.

Làm cách nào để phát hiện xem có thay đổi đối với bất kỳ thuộc tính nào trên cài đặt không?

Answer 1

góc sẽ chỉ nhận thấy nếu đối tượng đã được thay đổi đến một đối tượng khác nhau (ví dụ, các tham chiếu đối tượng thay đổi), vì vậy không thể sử dụng ngOnChanges() để giải quyết sự cố của bạn. Xem Victor Savkin's blog post để biết thêm thông tin.

Bạn có thể triển khai phương thức ngDoCheck() trong lớp MyDirective của mình. Vòng đời đó được gọi là "mỗi khi các thuộc tính đầu vào của một thành phần hoặc một chỉ thị được chọn. Hãy sử dụng nó để mở rộng phát hiện thay đổi bằng cách thực hiện kiểm tra tùy chỉnh".

Để thực hiện phương pháp kiểm tra tùy chỉnh của bạn, trước tiên bạn sẽ cần phải thực hiện một phương pháp .equals() trên lớp SettingsClass như vậy mà bạn sau đó có thể viết mã một cái gì đó như sau trong ngDoCheck():

ngDoCheck() { 
    if(!this.inputSettings.equals(this.previousInputSettings)) { 
     // inputSettings changed 
     // some logic here to react to the change 
     this.previousInputSettings = this.inputSettings; 
    } 
} 

Answer 2

Trong html của bạn, bạn không thể sử dụng CamelCase, thay đổi nó để

<my-directive [input-settings]="settings" [count]="settings.count"></my-directive>