2016-03-17 1 views
8

Я хотел бы иметь возможность передавать параметры дочерним компонентам, входящим в состав ng-outlet. Но я не уверен, как это сделать.Как передать конкретные привязки к компонентам ng-outlet, входящим в состав компонентного маршрутизатора в Angular 1.5?

Вот пример моих компонентов привязок:

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

Обычно я призываю это так:

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

Но вместо этого у меня есть это:

<ng-outlet></ng-outlet> 

и А маршрутизатор, который передает профиль в.

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

Итак, как я могу передать другие существенные привязки, возможно привязки, которые не могут быть закодированы в URL-адресе, этому компоненту?

Спасибо, помощь очень ценится

EDIT: Я попросил дать более конкретный пример того, что я хотел бы сделать.

Я думал, что концептуальная проблема была достаточно ясной, но вот частный случай, когда параметры прохождения маршрута явно недостаточны. Скажем, на моем уровне App компоненты У меня есть функция обратного вызова события, onDeleteItem (ID)

Как реплицировать

bindings: { 
    onDeleteItem: "&" 
} 

... 

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

с нг-розеткой?

+0

Можете ли вы привести пример, показывающий, что вы хотели бы сделать? –

ответ

6

Я смотрел на docs и увидел это для одного из компонентов, используемых в маршрутизаторе

bindings: { $router: '<' }

Так я думал хорошо, если это связывание может получить заполнены, то почему Мы передаем данные для других привязок, но я просмотрел источник маршрутизатора компонента, и на самом деле я не вижу способа передать данные таким образом. Это происходит потому, что здесь это выглядит, как будто это specially handling passing in the $router, но я не думаю, что шаблон изменен после этого:

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


Я скажу, хотя, вы должны иметь возможность передавать данные через компоненту используя

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

, а затем инъекционные RouteData в конструкторе компонента, но я думаю, что это только в угловом 2, потому что я не видел реализацию для него в угловом 1 маршрутизатора.


Так на основе исследования я сделал, я не думаю, что вы можете, или это трудно.Также, связанный: How to inject data into Angular2 component created from a router и https://github.com/angular/angular/issues/4452

5

Даже через ngOutlet вы можете использовать аргумент require, как указано здесь https://docs.angularjs.org/guide/component, чтобы потребовать родительский компонент. Таким образом, вы можете связываться с родительским компонентом из дочернего компонента (даже если родительский компонент вызывает дочерний компонент через ngOutlet). Это позволяет передать сообщение child => parent. Что касается родителя => ребенка, вы все равно можете использовать ту же технику, даже если она немного неудобна (вы вызываете родителя из ребенка, чтобы получить то, что вам нужно ...). Может быть, что-то более стандартное уже существует или скоро будет реализовано.

+1

На самом деле это действительно приятное обходное решение - да. Требовав родителя, все привязки, которые вы хотели бы передать, будут доступны на родительском контроллере. – tcmoore

Смежные вопросы