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

问题描述

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

I work with angular-material mdSidenav and want to programmatically open it and insert custom component.

我使用 @ViewChild('varName') 来提取 componentInstance 和 @ViewChild('varName', {read: ViewContainerRef}) 来提取我要放置的容器我的内容.

I use @ViewChild('varName') to extract componentInstance and @ViewChild('varName', {read: ViewContainerRef}) to extract container where I would place my content.

所以，我的问题是 - 是否有可能只有 1 个 @ViewChild 并从提取的参考中获取其他信息.

So, my question is - is it possible just 1 @ViewChild and get other info from extracted reference.

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

Second question - which values allowed for read property ? ElementRef/ViewContainerRef/... ?

更新:

我发现，对于我的组件，mdSidenav 的 ViewContainerRef 容器不正确.如何将 component.hostView 放置在 mdSidenav hostView 中?

I found, that ViewContainerRef of mdSidenav incorrect container for my component. How to place component.hostView inside mdSidenav hostView?

推荐答案

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

No, you can't specify multiple read types for one property. For example you specify the following in html:

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

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

Now it can be read as ElementRef, TemplateRef, ViewContainerRef or MyDirectiveInstance. You can't specify multiple read types because Angular would not know what to return for this node. You have to specify single read type for each query property. And generally you can't get one type from the other. Although both

读取属性允许哪些值?ElementRef/ViewContainerRef/... ?

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

There are the following types you can get through query:

• 元素引用
• 模板引用
• ViewContainerRef
• 提供者(组件/指令实例)

从这个源代码可以看出:

As can be seen from this source code:

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.

RenderElement points to the native DOM element associated with the view node but it is used internally and AFAIK can't be accessed using query in the component.

这篇关于如何以最有效的方式提取 ViewContainerRef 和 ComponentRef?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！