[分享] 如何擴充Layout Component的按鈕

General
1

這幾天在練習tailwindcss, 突然有個想法, 想要讓page component可以自定義按鈕至header bar

試了老半天 ContentChildren 都抓不到template
最後就做了個Service讓directive在 init , destroy時自行TemplateRef加入/離開 service的TemplateRef陣列中

讓LayoutComponent可以至Service取得模板並透過ng-template-outlet印出

不知道大家都怎麼完成這種功能的呢?

Demo:
angular-tepmlate - StackBlitz

1個讚
2

這個要怎麽用呢

3

我訂了一個 Directive header-action

只要加上 *header-action 這個 就可以將template加入 LayoutService 中
例如:

<button *header-action (click)="...">Some action</button>

而LayoutComponent那邊則是透過取得LayoutService中的actionTemplates
將取得的template 透過 ngTemplateOutlet 印出

<ng-container *ngFor="let t of layoutService.actionTemplates | async">
        <ng-container [ngTemplateOutlet]="t"></ng-container>
</ng-container>