Question

我一直在尝试使用@ViewChild(CustomDirective)或@ContentChild(CustomDirective)分别使用set变量访问我在元素上应用的自定义指令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>

但是，警报会返回undefined。

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

Answer 1

将详细信息添加到声明：模块的[]

<ng-template>未添加到DOM中，因此无法找到DetailedDirective。如果您使用<div det-insert>，则可以使用

Answer 2

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

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

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

2 个答案: