2 ways binding giữa 2 component trong Angular
TIL
594
DailyNote
10
angular
11
White

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

Đối với AngularJS, ta có thể dễ dàng mapping 2 ways binding với cách khai báo scope với '=' , ví dụ:

 var directive = {
        restrict: 'EA',
        templateUrl: 'app/feature/example.directive.html',
        scope: {
            max: '='
        },
        link: linkFunc,
        controller: ExampleController,
        controllerAs: 'vm',
        bindToController: true // because the scope is isolated
    };

Tuy nhiên, trong Angular bạn không thể làm các này. Mặc định lúc nào là các biến truyền từ component cha sang component con sẽ là ONE way binding.
Nếu muốn 2 ways binding, ta phải dùng mẹo: thay vì 1 biến nguyên thủy, ta truyền vào 1 object.

Ví dụ 1: Nếu dùng biến nguyên thủy, ta không thể 2 ways binding :

@Component({
  ...
  template: '<child [data]="parentData"></child>',
  directives: [ChildComponent]
})
export class ParentComponent{
  public parentData: string = ' this is content';
}

@Component({...})
export class ChildComponent{
  @Input()
  public data: string; 

Ví dụ 2: Sử dụng object để 2 ways binding:

@Component({
  ...
  template: '<child [data]="parentData"></child>',
  directives: [ChildComponent]
})
export class ParentComponent{
  public parentData: any  = {
     hello : 'this is content'
    }
}

@Component({...})
export class ChildComponent{
  @Input()
  public data:  any; 

Sở dĩ, ta làm được chuyện này là do khi dùng object, 2 biến của 2 component trỏ về cùng 1 địa chỉ bộ nhớ:
alt text

Kết:

Thực sự các này mình cũng không khuyến khích làm do đi ngược lại thiết kế của Angular. Thay vào đó, ta nên dùng cách sử lí event để xử lí dữ liệu giữa 2 component.

...

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.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
2 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 5 tháng trước
2 0
White
1 0
Tính bất biến của dữ liệu nằm trên blockchain có lẽ là lý do mạnh mẽ và thuyết phục nhất để triển khai các giải pháp dựa trên blockchain cho một lo...
Vani viết 5 tháng 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 5 tháng trước
0 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
12 bài viết.
3 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á!