小编Un1*_*r3w的帖子

我在这里想要实现的是我想将角度材料选项卡组件包装在我的共享组件中。

所以，这是我试图包装的组件：

PS：我可以在每个选项卡中显示组件：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

所以，我想使用包装器来使用它，例如：

<app-wrapper>
  <app-item>
    <app-item-header title="first"></app-item-header>
    <app-item-content>
      <app-needs-to-be-displayed></app-needs-to-be-displayed>
    </app-item-content>
  </app-item>
</app-wrapper>

应用程序包装.html

<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

TS 类别没有变化

应用程序项目.html

<mat-tab>
    <ng-content></ng-content>
</mat-tab>

TS 类别没有变化

应用程序项目标题.html

<ng-template mat-tab-label>
  {{title}}
</ng-template>

app-item-header.ts 类

@Input() title:string = ''

应用程序项目内容.html

<div>
   <ng-content></ng-content>
</div>

TS 类没有变化，这可以容纳实际的组件

这在控制台中不会给出任何错误，但页面上也不会显示任何内容。

这是正在运行的 stackblitz 版本

https://stackblitz.com/edit/angular-wrapping-component-with-ng-content

PS：请建议大家这是实现此目标的最佳解决方案还是还有其他解决方案？

有没有办法创建一个角度库并使用 ngx-translate 处理库内的翻译？这几天我尝试了很多方法但没有成功