Angular 1.5父子组件问题

Question

我正在使用Angular 1.5组件路由器，在父组件中获取可在子组件中访问的范围变量时遇到了问题。我已经创建了一个plunker here来说明这个问题。我已经用这个视图创建了一个父组件：

    <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>

然而，这不是违背了ng-outlet的目的吗？我不认为我应该像这样手动将参数传递给子组件，对吗？这样做的正确方法是什么？

Answer 1

只是偶然发现了这一点-希望你能找到解决方案，但如果不是在这里，它就是。您可以使用require属性轻松地执行此操作。

只需将此代码添加到您的子组件设置中，然后就可以了：

require: {
   parent: '^app'
}

然后访问父作用域对象，执行$ctrl.parent.search。

注意:你不需要叫它parent -它可以是你喜欢的任何名字。

我已经用叉子叉过你的柱塞了--看它是如何工作的http://plnkr.co/edit/epPg2xWY6IYJN2Fnvg61

Answer 2

您可以通过$routerOnActivate生命周期钩子访问路由参数，当路由转换到该组件时，会自动调用该钩子。下面是Angular文档中的示例：

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()创建的组件总是有独立的作用域--也就是说，你不能从它们的父作用域访问作用域变量。它们必须显式向下传递，或者通过路由器，或者通过绑定。

有关更多信息，您应该查看Component Router section of the Angular developer guide -新路由器的文档非常少，但该指南很好地解释了它是如何工作的。