使用 ViewChild / ContentChild 访问自定义指令答案

【问题标题】：Access custom directive with ViewChild / ContentChild使用 ViewChild / ContentChild 访问自定义指令
【发布时间】：2017-05-18 19:49:08
【问题描述】：

我一直在尝试访问我通过使用@ViewChild(CustomDirective) 或@ContentChild(CustomDirective) 分别在我的ngAfterViewInit 或ngAfterContentInit 函数中首次使用set 变量来访问我在元素上应用的自定义指令。

但是，他们都没有工作。一开始我以为是我从网络服务器加载了一些内容，但即使设置了静态变量，它也不起作用。

这是我所拥有的：

@Directive({
  selector: '[det-insert]',
})
export class DetailedDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

和

... (importing + component stuff)
export class DetailedView implements AfterViewInit {
    @ViewChild(DetailedDirective) detView : DetailedDirective;
    constructor(...)
    ngAfterViewInit(){
        alert(detView);
    }
}

还有模板：

<ng-template det-insert></ng-template>

但是，警报返回undefined。

我不知道为什么。有任何想法吗？我已经查看了stackoverflow，但我的模板也没有被*ngIf 阻碍，我也没有在正确的“AfterXInit”函数之前开始使用我的查询指令。我已经尝试分别为 ViewContent 和 AfterContentInit 切换 ViewChild 和 AfterViewInit，但无济于事。

【问题讨论】：

<ng-template> 未添加到 DOM，因此无法找到 DetailedDirective。如果您使用<div det-insert>，它将起作用
@GünterZöchbauer 感谢您的回答！不幸的是，我试过了，但它仍然不起作用......（仍然输出未定义。此外，我的代码与上面的代码没有任何不同 - 我将所有差异都注释掉了。）（我再次尝试使用 ViewChild 和 ContentChild )
您是否将DetailedDirective 添加到您的模块的declarations: []
@GünterZöchbauer ...哦，我的上帝。我没有。我很抱歉像这样浪费你的时间......不过非常感谢你！想将其添加为“官方”答案吗？也许有一天有人会像我一样忘记在声明数组中添加指令并偶然发现这个线程......

标签： javascript angular initialization angular-directive

【解决方案1】：

我自己也遇到过类似的问题。我为各种警报指令/组件创建了一个单独的模块。我的警报指令是在该警报模块中定义和声明的。我试图在我的 app 模块中使用该指令，为了让这个相同的示例正常工作，您需要指定警报模块 exports: [AppLevelAlertDirective]。

您仍然可以使用<ng-template yourDirective></ng-template>，尽管它稍后不会出现在 DOM 中。这是在渲染 DOM 之前很好地捕获的。请看https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html#!#loading-components

【讨论】：

只是花了几个小时把我的头撞到墙上......果然，我图书馆的顶级模块没有重新导出该指令。谢谢@杰克史密斯

【解决方案2】：

在声明中添加DetailedDirective：模块的[]

<ng-template> 未添加到 DOM 中，因此无法找到DetailedDirective。如果您使用<div det-insert>，它将起作用

【讨论】：

我认为这不是真的。文档建议您使用 ng-template 的具体原因是它不会“呈现任何额外的输入”。 (angular.io/docs/ts/latest/cookbook/…)。我遇到了一个问题，当我尝试引用 viewContainerRef 时，我的 @ViewChild 未定义。
如果我的指令在不同的模块中，我还需要在我的模板所在的模块中声明指令吗？
@JakeSmith 我错过了该指令应该是结构指令。但是，它仍然不会被添加到 DOM 中。只有TemplateRef 可以注入指令本身，以便将其标记到DOM。
不，如果它是同一个模块的一部分，则将其添加到声明中，否则将模块添加到声明它的导入中。