Проблема Angular 1.5 Parent-Child Component

Question

Я использую Angular 1.5 Component router и у меня возникают проблемы с получением области видимости в родительском компоненте, чтобы она была доступна в дочерних компонентах. Я создал вантуз, который иллюстрирует проблему. Я создал родительский компонент с этим видом:

    <nav>
    <ul class="linkList">
        <li><a ng-class="{selected: $ctrl.isSelected('Applications')}" ng-link="['Applications', {search:$ctrl.search}]">Applications</a></li>
        <li><a ng-class="{selected: $ctrl.isSelected('Processes')}" ng-link="['Processes']">Processes</a></li>
        <li><a ng-class="{selected: $ctrl.isSelected('Tasks')}" ng-link="['Tasks']">Tasks</a></li>
        <li><a ng-class="{selected: $ctrl.isSelected('Resources')}" ng-link="['Resources']">Resources</a></li>
    </ul>
    <div class="filter">
        Filter: <input type="search" ng-model="$ctrl.search" />
    </div>
    <div class="clear"></div>
</nav>
<ng-outlet></ng-outlet>

Обратите внимание на переменную "search" в представлении родительского компонента. Я хочу, чтобы это было доступно для дочерних компонентов, но это не работает для меня. Я видел примеры, которые показывают, что дочерние компоненты имеют прямые ссылки в родительских компонентах, как показано ниже:

<application-grid search="$ctrl.search"></application-grid>

Однако не противоречит ли это целям нг-розетки? Я не думаю, что мне нужно вручную передавать параметры дочерним компонентам, как это правильно? Как правильно это сделать?

Answer 1

Просто наткнулся на это - надеясь, что вы нашли решение, но если не здесь, то оно есть. Вы можете легко заставить это работать, используя свойство require.

Просто добавьте это к вашему дочернему компоненту и бинго:

require: {
   parent: '^app'
}

Затем для доступа к родительскому объекту области действия выполните $ctrl.parent.search.

Заметьте, вам не нужно называть это родителем - это может быть любое имя, которое вам нравится.

Я раздвоил твой планкр - видишь, как он работает http://plnkr.co/edit/epPg2xWY6IYJN2Fnvg61

Answer 2

Вы можете получить доступ к параметрам маршрута через $routerOnActivate ловушка жизненного цикла, которая вызывается автоматически при переходе маршрута к этому компоненту. Вот пример из Angular Docs:

function HeroDetailComponent(heroService) {
    var $ctrl = this;

    this.$routerOnActivate = function(next, previous) {
        // Get the hero identified by the route parameter
        var id = next.params.id;
        return heroService.getHero(id).then(function(hero) {
            $ctrl.hero = hero;
        });
    };
...

Также стоит отметить, что компоненты, созданные с angular.module().component() всегда есть отдельные области видимости, т. е. в них нельзя получить доступ к переменным области видимости из родительской области видимости. Они должны быть явно переданы через маршрутизатор или через привязки.

Для получения дополнительной информации вам следует обратиться к разделу "Маршрутизатор компонентов" руководства разработчика Angular - документация для нового маршрутизатора очень скудна, но это руководство хорошо объясняет, как все это работает.