如何最有效地提取ViewContainerRef和ComponentRef？

Question

我使用棱角材质mdSidenav，并希望以编程方式打开它并插入自定义组件.

我使用@ViewChild('varName')提取componentInstance，使用@ViewChild('varName', {read: ViewContainerRef})提取将放置内容的容器。

所以，我的问题是-它是否可能只是1 @ViewChild，并从提取的参考得到其他信息。

第二个问题-哪些值允许读取属性？元素参考/视图容器参考/.？

更新：

我发现，ViewContainerRef of mdSidenav不正确的容器为我的组件。如何将component.hostView放在mdSidenav hostView中？

Answer 1

是否可能只需1 @ViewChild并从提取的参考中获取其他信息。

不，不能为一个属性指定多个读取类型。例如，您可以在html中指定以下内容：

<ng-template mydir #vc></ng-template>

现在它可以被理解为ElementRef，TemplateRef，ViewContainerRef或MyDirectiveInstance。您不能指定多个read类型，因为角不知道该节点返回什么。必须为每个查询属性指定单个read类型。一般来说，你不能从另一种类型中得到一种。虽然两者都

哪些值允许读取属性？元素参考/视图容器参考/.？

您可以通过查询获得以下类型：

• ElementRef
• TemplateRef
• ViewContainerRef
• 提供者(组件/指令实例)

从这个源代码可以看出：

export function getQueryValue(
    view: ViewData, nodeDef: NodeDef, queryValueType: QueryValueType): any {
  if (queryValueType != null) {
    // a match
    let value: any;
    switch (queryValueType) {
      case QueryValueType.RenderElement:
        value = asElementData(view, nodeDef.index).renderElement;
        break;
      case QueryValueType.ElementRef:
        value = new ElementRef(asElementData(view, nodeDef.index).renderElement);
        break;
      case QueryValueType.TemplateRef:
        value = asElementData(view, nodeDef.index).template;
        break;
      case QueryValueType.ViewContainerRef:
        value = asElementData(view, nodeDef.index).viewContainer;
        break;
      case QueryValueType.Provider:
        value = asProviderData(view, nodeDef.index).instance;
        break;
    }
    return value;
  }
}

RenderElement指向与视图节点关联的原生DOM元素，但它在内部使用，不能使用组件中的查询访问AFAIK。