在组件选择器中添加自定义模板Html

Question

  

有没有办法在组件选择器中添加自定义模板html？

我有一个带有选择器#include "string.h" // points to my library include #include <stdio.h> // points to C stdlib include 的组件AppToolbarComponent，它有一个空白模板。我想在两个不同的组件上使用此组件，但在使用组件时定义了模板。例如：

在 <app-toolbar>：

上

page-one.component.html

...以及 <app-toolbar> <button (click)="onClickOne()">Button in Component One</button> </app-toolbar> ：

page-two.component.html

有什么想法吗？

Answer 1

  

根据 @pixelbits 的评论，这是一个答案：

在<app-toolbar>中，在组件模板中添加<ng-content>。这是一个例子：

<div>Some Content</div>
<ng-content></ng-content>

现在，<app-toolbar>选择器中添加的任何内容都将在<ng-content>内呈现。例如：

<app-toolbar>
    <!-- The following content will render inside <ng-content> 
         in the app-toolbar component -->
    <button (click)="onClickOne()">Button in Component One</button>
</app-toolbar>

以下是StackBlitz Demo的链接。