Giao tiếp thành phần trong góc 1,5

Question

Đề xuất truyền thông thành phần góc 1,5 thường có các ràng buộc đầu ra để gọi các phương thức trên bộ điều khiển gốc.

Giả sử tôi có thành phần gốc và hai thành phần con.

<root> 
    <child-1></child-1> 
    <child-2></child-2> 
</root> 

Nó muốn phản ứng với lần nhấp nút trên thành phần một bằng cách đọc giá trị trên thành phần hai và sau đó thực hiện điều gì đó trong thư mục gốc.

Ví dụ: child-1 là chỉ thị bao bọc thư viện bản vẽ gắn bản vẽ vào nút DOM của nó và có một biến để kiểm soát bản vẽ đó.

child-2 có nút. Khi được nhấp, dữ liệu từ biến số child-1 sẽ được chuyển sang gốc để thực hiện điều gì đó với biến đó.

Cụ thể, child-1 kết thúc tốt đẹp var graph2d = new vis.Graph2d(container, dataset, options);. Sau đó, tôi muốn lấy một số thông tin từ số graph2d và chuyển nó đến số root để làm một việc gì đó với nó.

Điều này tóm tắt: các thành phần có thể phản ứng như thế nào với các sự kiện do các thành phần khác phát hành? Các đề xuất đầu vào và đầu ra dường như không bao gồm kịch bản đó.

Answer 1

Trong góc 1.5 bạn có thể sử dụng yêu cầu và/hoặc liên kết thuộc tính (đầu vào/đầu ra) để liên lạc.

Nếu bạn sử dụng đòi hỏi tài sản sau đó thành phần gốc của bạn sẽ xuất bản một api và thành phần con của quý vị sẽ nhận được một tham chiếu đến bộ điều khiển:

angular.module('app').component('child1', { 
    bindings: {}, 
    require: {api: '^root'}, //your <root> component 
    template: '', 
    controller: controller 
}); 

Sau đó bạn có thể sử dụng phương pháp của các thành phần gốc trong thành phần con của bạn:

$ctrl.api.addWatchedBook(); 

Đây là chức năng gốc điều khiển thành phần:

$ctrl.addWatchedBook = addWatchedBook; 

function addWatchedBook(bookName){ 

    booksWatched.push(bookName); 

} 

Đây là một hoàn architectual tổng quan: Component Communications