2 ways binding giữa 2 component trong Angular
TIL
499
DailyNote
10
angular
10
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.
1 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 13 ngày trước
2 0
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
{{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á!