Question

我发现 Angular Docs 建议，为了获得对 ViewContainerRef 的访问权以创建动态组件，我应该使用类似：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ad-host]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

然后在组件中：

export class AppComponent {  
  @ViewChild(AdDirective, {static: true}) adHost: AdDirective;

... //to get access to ViewContainerRef
const viewContainerRef = this.adHost.viewContainerRef;

但是，我可以在不使用指令的情况下，通过将{strong> ViewChild 与{read : ViewContainerRef}一起使用来实现相同的目的，例如：

export class AppComponent {

  @ViewChild('someHashTag', {read : ViewContainerRef}) target: ViewContainerRef;

这两种方法之间是否存在任何差异（可能的问题），或者为什么我不应该使用需要较少代码和精力的方法？

Answer 1

不确定您是否仍在尝试解决此问题，但是我已经能够通过如下指令获取ViewContainerRef：

@ViewChild(AdDirective, {static: true, read: ViewContainerRef}) target: ViewContainerRef;

Answer 2

使用指令，您将仅在指令第一次出现时获得 vcref。如果你想在 Dom 中的多个位置使用 vcRef，那么 @viewchild() 会很有用。

ViewChild与Directive获取ViewContainerRef

2 个答案: