Làm thế nào để vượt qua các ràng buộc cụ thể cho các thành phần ng-outlet được đưa vào bởi bộ định tuyến thành phần trong Angular 1.5?

Question

Tôi muốn có thể chuyển các tham số cho các thành phần con được đưa vào bằng ng-outlet. Nhưng tôi không chắc chắn làm thế nào để làm điều đó.

Dưới đây là một ví dụ về sự gán thành phần của tôi:

app.component('profile', { 
    bindings: { 
    section: '=', 
    currentUser: '<' 
    }, 
... 

Bình thường, tôi muốn gọi này như sau:

<profile section="$ctrl.bio" current-user="$ctrl.selectedUser"></profile> 

Nhưng thay vào đó tôi có điều này:

<ng-outlet></ng-outlet> 

Và một bộ định tuyến chuyển cấu hình đó.

$routeConfig: [ 
     { path: '/Profile/:id', name: 'Profile', component: 'profile' }] 

Vì vậy, làm thế nào các blazes để tôi vượt qua các ràng buộc cần thiết khác, có lẽ bindings mà không thể được mã hóa vào URL, thành phần này ??

Cảm ơn, giúp đỡ được rất nhiều đánh giá cao

EDIT: Tôi đã được yêu cầu cung cấp một ví dụ cụ thể hơn về những gì tôi muốn làm.

Tôi nghĩ vấn đề khái niệm khá rõ ràng, nhưng đây là trường hợp cụ thể khi thông số tuyến đường đi qua là không đủ. Giả sử ở cấp thành phần ứng dụng của tôi, tôi có một chức năng sự kiện gọi lại, onDeleteItem (id)

Làm thế nào để tái tạo

bindings: { 
    onDeleteItem: "&" 
} 

... 

<some-component on-delete-item="$ctrl.onDeleteItem(id)"></some-component> 

với một ng-lối thoát?

Answer 1

Tôi nhìn trên docs và thấy điều này với một trong các thành phần được sử dụng trong các bộ định tuyến

bindings: { $router: '<' }

Vì vậy, tôi đã suy nghĩ tốt nếu đó là ràng buộc có thể được điền vào, thì tại sao có thể Chúng tôi không chuyển dữ liệu cho các ràng buộc khác, nhưng tôi đã xem qua nguồn của bộ định tuyến thành phần và tôi thực sự không thấy cách truyền dữ liệu theo cách đó. Điều này là do ở đây có vẻ như nó là specially handling passing in the $router, nhưng tôi không nghĩ rằng các mẫu được sửa đổi sau đó:

activate(instruction) { 
    ... 
    this.controller.$$template = '<' + dashCase(componentName) + ' $router="::$$router"></' + dashCase(componentName) + '>'; 
    ... 
}; 

tôi sẽ nói mặc dù, bạn có nghĩa vụ phải có khả năng truyền dữ liệu thông qua các thành phần sử dụng

$routeConfig: [ 
    { path: '/Profile/:id', name: 'Profile', component: 'profile', data: { item1: 'item1'} }] 

và sau đó tiêm RouteData trong constructor của các thành phần, nhưng tôi nghĩ rằng đây chỉ là ở góc 2, bởi vì tôi không thấy thực hiện cho nó trong 1 bộ định tuyến góc.

Vì vậy, dựa trên các nghiên cứu tôi đã làm, tôi không nghĩ rằng bạn có thể, hoặc rất khó.Ngoài ra, có liên quan: How to inject data into Angular2 component created from a router và https://github.com/angular/angular/issues/4452

Answer 2

Thậm chí thông qua ngOutlet, bạn có thể sử dụng đối số yêu cầu như được chỉ định ở đây https://docs.angularjs.org/guide/component để yêu cầu thành phần gốc. Bằng cách này, bạn có thể giao tiếp với thành phần cha từ thành phần con (ngay cả khi thành phần cha mẹ gọi thành phần con thông qua ngOutlet). Điều này cho phép giao tiếp từ child => parent. Về cha mẹ => con, bạn vẫn có thể sử dụng cùng một kỹ thuật, ngay cả khi nó cảm thấy một chút khó xử (bạn gọi cha mẹ từ đứa trẻ để có được những gì bạn cần ...). Có thể tiêu chuẩn nào đó đã tồn tại hoặc sẽ sớm được triển khai.