Cách truyền dữ liệu từ component con sang component cha trong Angular
TIL
487
angular
10
DailyNote
10
White

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

Trong AngularJS, chúng ta có thể mapping dữ liệu 2 chiều giữa component và directive.

Đối với Angular, chúng ta không thể mapping dữ liệu 2 chiều giữa component cha và component con. Để chuyển dữ liệu từ component con trở về conponent cha, ta phải sử dụng cơ chế phát và bắt event.
Khi đó, component con phát event và component cha bắt event.

export class SuggestionMenuComponent {
    @Output() onSuggest: EventEmitter<any> = new EventEmitter();

    suggestionWasClicked(data): void {
        this.onSuggest.emit(data);
    }
}

<suggestion-menu (onSuggest)="insertSuggestion($event)">
</suggestion-menu>

Trong trường hợp muốn truyền nhiều hơn 1 dữ liệu, ta có thể làm như sau:

export class SuggestionMenuComponent {
    @Output() onSuggest: EventEmitter<any> = new EventEmitter();

    suggestionWasClicked(data1, data2): void {
        this.onSuggest.emit([data1, data2]);
    }
}

<suggestion-menu (onSuggest)="insertSuggestion($event[0],$event[1])">
</suggestion-menu>

...

vani 05-02-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vani

12 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 0
Merkle tree, cũng như được biết đến là cây hash nhị phân, là một dạng cấu trúc dữ liệu sử dụng để lưu trữ hash của các thông tin cá nhân trong bộ d...
Vani viết 7 ngày trước
1 0
Bài viết liên quan
White
0 3
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 ...
Vani viết 11 ngày trước
0 3
White
0 0
Thực Hành Content Projection, Lifecycle Liên Quan và QueryList Changes Event Trong Angular Bài viết này là bài tiếp theo trong series "Thử Nghiệm ...
Tiep Phan viết 11 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
12 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!