如何解决带有自定义组件的角度包裹角度材料选项卡组件
我想在这里实现的是我想在我的共享组件中包装角材质选项卡组件。
所以,这是我要包装的组件:
<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>
app-wrapper.html
<mat-tab-group>
<ng-content></ng-content>
</mat-tab-group>
TS 类没有变化
app-item.html
<mat-tab>
<ng-content></ng-content>
</mat-tab>
TS 类没有变化
app-item-header.html
<ng-template mat-tab-label>
{{title}}
</ng-template>
app-item-header.ts 类
@input() title:string = ''
app-item-content.html
<div>
<ng-content></ng-content>
</div>
TS 类没有变化,这可以容纳一个实际的组件
这里是可用的 stackblitz 版本
https://stackblitz.com/edit/angular-wrapping-component-with-ng-content
PS:如果这是实现这一目标的最佳解决方案,请建议大家 或者还有其他解决方案?
解决方法
您什么也看不到,因为 mat-tab
组件需要是 mat-tab-group
组件的直接子级,否则它不知道存在任何选项卡。因此,您需要以不同的方式处理事情。您需要从自定义组件中获取内容,然后在包装器组件中呈现所有内容。我认为最简单的方法是将内容作为模板,它也非常接近您创建的内容。我将从最低的组件开始,然后向上移动。
app-item-content
组件可以是您创建时的样子。 app-item-header
需要更改。与选项卡一样,mat-tab-label
指令也需要直接在 mat-tab-group
内应用。这就是我从模板中删除它的原因。
<ng-template>
{{title}}
</ng-template>
主要变化是我使用 ViewChild 装饰器将组件内的 ng-template
也公开为代码中的属性。这也允许从组件外部访问模板。
@Component({
selector: 'app-item-header',templateUrl: './item-header.component.html',styleUrls: ['./item-header.component.css']
})
export class ItemHeaderComponent implements OnInit {
@ViewChild(TemplateRef) public headerTemplate: TemplateRef<any>;
@Input() title:string = ''
}
之后就可以移动到 app-item
组件了。这里也只是模板中的一个小改动。使用与标题组件相同的方法,您可以获得项目内容的模板。
<ng-template>
<ng-content select="app-item-content"t></ng-content>
<ng-template>
在代码中,您可以像以前一样再次使用 ViewChild 装饰器来获取内容模板。标头是项目的子组件,您需要使用不同但相似的 ContentChild 装饰器来访问提供标头模板的标头组件。
@Component({
selector: 'app-item',templateUrl: './item.component.html',styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
@ViewChild(TemplateRef) public contentTemplate: TemplateRef<any>;
@ContentChild(ItemHeaderComponent) public itemHeader: ItemHeaderComponent;
}
此时,您可以访问在 mat-tab
组件中呈现内容所需的一切。在模板中,您需要呈现对应于每个 mat-tab-group
组件的 mat-tab
和 app-item
以及之前公开的模板中的内容。
<mat-tab-group>
<mat-tab *ngFor="let item of appItems">
<ng-template mat-tab-label>
<ng-container *ngTemplateOutlet="item.itemHeader.headerTemplate"></ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="item.contentTemplate"></ng-container>
</mat-tab>
</mat-tab-group>
如您所见,您为每个项目创建一个选项卡并在项目的内容中呈现非常简单。有点棘手的是,您需要在另一个 ng-template
中呈现模板的标题才能添加 mat-tab-label
指令,将其识别为标题内容。
要获取包装器组件内的所有 app-item
组件,您可以使用 ContentChildren 装饰器,它提供内容内的组件列表。和前面的例子一样,我们只是在代码中添加了一个属性,其余的由 Angular 处理。
@Component({
selector: 'app-wrapper',templateUrl: './wrapper.component.html',styleUrls: ['./wrapper.component.css']
})
export class WrapperComponent implements OnInit {
@ContentChildren(ItemComponent) public appItems: QueryList<ItemComponent>;
}
我还创建了一个 fork of you StackBlitz,您可以在其中看到它的运行情况。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。