2017-07-12 11 views
2

私は角度材料のmdSidenavを使用し、プログラムでそれを開いてカスタムコンポーネントを挿入したいと考えています。ViewContainerRefとComponentRefを最も効率的に抽出するにはどうすればいいですか?

@ViewChild('varName')を使用してcomponentInstanceを抽出し、@ViewChild('varName', {read: ViewContainerRef})を使用してコンテンツを配置するコンテナを抽出します。

私の質問は - @ViewChildを1つしか使用できず、抽出された参照から他の情報を得ることです。

第2の質問 - どのプロパティが読み取りプロパティに許可されていますか? ElementRef/ViewContainerRef/...?

更新:

私は、私のコンポーネントのためにそのViewContainerRef mdSidenavの間違ったコンテナを発見しました。 mdSidenav hostViewの中にcomponent.hostViewを配置する方法は?

答えて

2

@ViewChildはちょうど1つ可能であり、他の情報は の参照から取得できますか?

いいえ、1つのプロパティに複数の読み取りタイプを指定することはできません。たとえば、あなたは、HTMLで次のように指定します。

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

は、今ではElementRefTemplateRefViewContainerRefまたはMyDirectiveInstanceとして読み取ることができます。 Angularはこのノードに対して何を返すべきかを知らないので、複数のタイプのreadを指定することはできません。それぞれのクエリプロパティには、単一のreadタイプを指定する必要があります。そして、一般的に、あなたは他のタイプから1つのタイプを得ることはできません。両方ともですが

読み取りプロパティにはどの値が許可されていますか? ElementRef/ViewContainerRef/...?

  • 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要素を指し、それは内部的に使用され、私の知る限り、コンポーネントにクエリを使用してアクセスすることができません。

関連する問題