javascript - 使用 ViewChild/ContentChild 访问自定义指令

Question

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

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

这是我所拥有的:

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

但是，警报返回未定义。

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

Answer 1

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

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