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

【问题标题】：Add Custom Template Html in Component Selector在组件选择器中添加自定义模板 Html
【发布时间】：2018-01-23 06:45:51
【问题描述】：

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

我有一个带有选择器<app-toolbar> 的组件AppToolbarComponent，它有一个空白模板。我想在两个不同的组件上使用这个组件，但是在使用组件时定义了模板。例如：

开启page-one.component.html:

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

... 以及 page-two.component.html:

<app-toolbar>
    <button (click)="onClickTwo()">Button in Component Two</button>
</app-toolbar>

有什么想法吗？

【问题讨论】：

你试过使用<ng-content>吗？
@pixelbits 太棒了！不知道，我正在尝试<ng-template>。像魅力一样工作（Y）谢谢。

标签： angular

【解决方案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 的链接。

【讨论】：