Angular 1.5 父子组件问题

Posted 2023-02-23

【中文标题】Angular 1.5 父子组件问题

【英文标题】：Angular 1.5 Parent-Child Component Issue

【发布时间】：2016-10-03 16:54:28

【问题描述】：

我正在使用 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>

注意父组件视图中的“搜索”变量。我希望子组件可以访问它，但它对我不起作用。我见过一些例子，显示子组件在父组件中被直接引用，如下所示：

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

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

【问题讨论】：

我发现了这个：***.com/questions/36050333/…。如果这真的不可能的话，这对于 Angular 1.5 来说似乎是一个巨大的错误。

【参考方案1】：

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

只需将此添加到您的子组件设置和宾果游戏中：

require: 
   parent: '^app'

然后要访问父范围对象，请执行 $ctrl.parent.search。

请注意，您不必将其称为父级 - 它可以是您喜欢的任何名称。

我已经分叉了你的 plunkr - 看到它在工作 http://plnkr.co/edit/epPg2xWY6IYJN2Fnvg61

【参考方案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 - 新路由器的文档非常少，但该指南很好地解释了它是如何工作的。

【讨论】：

我正在尝试使用“绑定”属性（绑定：搜索：'='），但在子组件中，$ctrl.search 始终未定义，所以我正在尝试找出原因。

@Andy：我很确定这不是 1.5 路由器的工作方式，不幸的是 - 我还没有找到任何其他方法来做到这一点，您在问题 cmets 中链接的帖子似乎暗示这是不可能的。不过我同意，通过绑定传递它会更有意义）：

@Andy：就我个人而言，我更喜欢使用 ui-router - that does allow you to pass things from the route to the bindings using the resolve feature 的 1.0 alpha（选项 1、2 和 4 是从该提案中实现的）。值得研究！