如何以最有效的方式提取ViewContainerRef和ComponentRef? [英] How to extract ViewContainerRef and ComponentRef in most efficient way?

问题描述

我使用角材料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?

推荐答案

是否可能只有1个@ViewChild并从提取的数据中获取其他信息 参考.

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

否，您不能为一个属性指定多种读取类型.例如，您在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/...?

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

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

There are the following types you can get through query:

• 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.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！