时间戳

首页 > 解决方案 > 从指令访问外部组件实例

angular - 从指令访问外部组件实例

问题描述

我有一个带有单个输入 [id] 的简单组件，以及一个使用“my-directive”的模板。

<div>
    <div my-directive>
        hello world
    </div>
</div>

simple-component 将在模板中多次使用：

<simple-component [id]="1"></simple-component>
<simple-component [id]="2"></simple-component>

我是否可以从每个 my-directive 实例中访问 simple-component 的实例？

目标是每个 my-directive 实例都知道它们的简单组件“主机/外部”实例，以便访问它们的“id”属性，例如。

标签： angularangular-directiveangular-components

解决方案

是的，有一种使用@Host()分辨率修饰符访问父组件的方法（有关官方文档的更多信息）。基本思想是通过使用依赖注入来导航组件树，以便从子元素中找到对父元素的引用。这里有几个很好的例子。

默认情况下，Angular 会向上搜索提供的实例直到NullInjector（层次结构中的最高层）。如果它没有找到实例，它会抛出异常，除非我们使用@Optional，在这种情况下它会返回null。在您的具体示例中，我们使用Host()告诉 Angular 停止搜索，将此组件作为搜索时的最后一站。我们不必使用它，即使我们省略Host()它仍然可以工作。

在my-directive.directive.ts文件中：

constructor(@Host() private parent: SimpleComponent) {
    // here we have an instance of SimpleComponent and we can access its properties except for the Input properties, those are still not set in constructor
}

我创建了一个简单的stackblitz示例来演示这一点。

编辑：这是我们找到的实例的示例，它是指令AppComponent的父级。在这里我们不能使用，因为搜索将以指令作为最后一站停止（并且在链中更高）。所以我们只是不添加任何东西，我们得到了正确的参考。SimpleComponentHost()AppComponent

希望这可以帮助。

推荐阅读