web-dev-qa-db-ja.com

Angularラッパーコンポーネントでマテリアルタブが機能しない

Material Designed Angularコンポーネントを提供する企業コンポーネントライブラリを開発しています。したがって、このライブラリのユーザーは、たとえば、 Angularマテリアルを直接使用しますが、「custom-tabs」などのコンポーネントを含めます。

MatTabModuleのコンポーネントを使用すると、チャームのように直接動作しますが、カスタムコンポーネントを使用すると、投影されたコンテンツが表示されません。

使用法は、Angular Material APIと非常によく似ています。

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

カスタムコンポーネントは、次のようにコンテンツを投影しようとします。

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

誰でも私たちがそれを機能させる方法を知っていますか？

私は StackBlitz を提供しました。ここで問題の動作を確認できます。

angularwrapperangular-material2angular-componentsangular2-ngcontent
10
Robert Gruner

あなたが持っている問題は、このgithubの問題で説明されているものと同じだと思います： https://github.com/primefaces/primeng/issues/1215

基本的にここでの問題は、コンポーネントの境界を越えるときにng-contentが@ContentChildを提供しないことです。

Mat-tabが@ContentChildを使用していることがわかります： https://github.com/angular/material2/blob/master/src/lib/tabs/tab.ts

だから私は唯一の解決策はそれをprimeng issueで説明されている方法でプログラム的にオーバーライドすることだと思います。

2
Dariusz Ostolski