Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Day007 - Khi nào nên dùng ngOnChanges hay setter/getter #5

Open
phongca22 opened this issue Jun 17, 2020 · 7 comments
Open

Day007 - Khi nào nên dùng ngOnChanges hay setter/getter #5

phongca22 opened this issue Jun 17, 2020 · 7 comments
Labels
answered question Further information is requested

Comments

@phongca22
Copy link

phongca22 commented Jun 17, 2020

Em thấy nên ghi rõ thêm ưu nhược điểm của ngOnChanges và setter/getter.
Trong bài viết anh chỉ ghi 1 câu chung chung thế này:
Trong trường hợp bạn không thích dùng ngOnChanges, chúng ta có thể sử dụng getter/setter để làm điều này.

https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day007-Component-Interaction-01.md

@nartc
Copy link
Member

nartc commented Jun 18, 2020

@phongca22 Việc dùng setter vs ngOnChanges là gần như như nhau dành cho single Input. Tuy nhiên, ở trường hợp cần check nhiều Inputs cùng lúc thì ngOnChanges là sự lựa chọn tốt hơn.

@nartc nartc added the question Further information is requested label Jun 18, 2020
@trungvose
Copy link
Member

trungvose commented Jun 18, 2020

@phongca22 Theo anh một trong những lợi thế của ngOnChanges là em có thể check được giá trị hiện tại, và giá trị trước đó, hoặc lần thay đổi đó có phải là lần đầu tiên hay ko.

Ví dụ như em có component với @Input text: string như sau

export class TestComponent implements OnChanges {
    @Input() text: string;
    constructor() { }

    ngOnChanges(changes: SimpleChanges) { 
        let textChange = changes.text;        
    }
}

Thì biến textChange sẽ là kiểu SimpleChange với khá nhiều property hữu dụng. Mỗi khi value của text thay đổi thì em sẽ access dc đến các property này ở trong hàm ngOnChanges

export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

@tieppt
Copy link
Member

tieppt commented Jun 18, 2020

Trong trường hợp khởi tạo component dynamically thì mình phải tự call lifecycle do đó lúc này có thể dùng setter thay cho Input, nó sẽ tự động gọi hàm set thì chúng ta có thể làm thêm side effect ở đây.

@nartc nartc added the answered label Jun 18, 2020
@phongca22 phongca22 changed the title Day007 - Khi nào nên dùng OnChanges hay setter/getter Day007 - Khi nào nên dùng ngOnChanges hay setter/getter Jun 18, 2020
@phongca22
Copy link
Author

phongca22 commented Jun 18, 2020

Theo như @nartc thì với single input mình sẽ dùng setter/getter nhanh và gọn hơn. Trong khi dùng ngOnChanges phải implement OnChanges rồi override lại ngOnChanges() nữa.
Nếu nhiều input thì phải dùng ngOnChanges rồi.

Thanks @tieppt @trungk18 @nartc

@nartc nartc reopened this Jun 18, 2020
@nartc
Copy link
Member

nartc commented Jun 18, 2020

@phongca22 mình reopen để làm như documentation cho repo. Label answered có ý nghĩa như câu hỏi đã đc trả lời. Thank you nhé :D

@phhien203
Copy link
Contributor

Mình xin bổ sung thêm 1 ý nữa đó là nếu mình muốn viết code theo style imperative thì mình dùng ngOnChanges, còn nếu muốn viết theo style declarative thì dùng getters.

@tieppt
Copy link
Member

tieppt commented Dec 15, 2020

@phhien203 2 cách đều gọi hàm thì đâu có khác gì nhau???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered question Further information is requested
Projects
None yet
Development

No branches or pull requests

5 participants