如何以最有效的方式提取 ViewContainerRef 和 ComponentRef？

Question

我使用 angular-material mdSidenav 并希望以编程方式打开它并插入自定义组件。

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

所以，我的问题是 - 是否可以仅使用 1 个 @ViewChild 并从提取的参考中获取其他信息。

第二个问题 - 允许读取哪些值属性？ ElementRef/ViewContainerRef/... ?

更新：

我发现 mdSidenav 的 ViewContainerRef 不适合我的组件。如何在 mdSidenav hostView 中放置 component.hostView？

Answer 1

Is it possible just 1 @ViewChild and get other info from extracted reference.

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

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

现在可以读作ElementRef、TemplateRef、ViewContainerRef或MyDirectiveInstance。您不能指定多个 read 类型，因为 Angular 不知道该节点要 return 什么。您必须为每个查询属性指定单个 read 类型。通常你不能从另一种类型中获得一种类型。虽然两者

Which values allowed for read property ? ElementRef/ViewContainerRef/... ?

通过查询可以得到以下类型：

元素引用
模板引用
ViewContainerRef
提供商（Component/Directive 实例）

从这段源码可以看出：

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。

如何以最有效的方式提取 ViewContainerRef 和 ComponentRef？

How to extract ViewContainerRef and ComponentRef in most efficient way?

angular2-directives

angular-material2

angular