angular - 如何在指令中使用 ng-content

Question

如何使用 angular@Directive创建自定义按钮元素，就像 angular 一样mat-button？

说吧，我在写

<button mat-button>Basic</button>

并像这样显示它

<button mat-button="" class="mat-focus-indicator mat-button mat-button-base">
  <span class="mat-button-wrapper">Basic</span>
</button>

我怎么能这样做呢？

<button custom-button>Basic</button>

标签： angularangularjs-directive

Answer 1

Angular 材质与 , 一起使用@Component，mat-button因为（众多）选择器是button[mat-button]. 所以它是一个组件，而不是一个指令（虽然一个组件扩展指令，但你明白了）

你可以在这里查看他们是如何做到的。

这是他们使用的模板的一部分：

<span class="mat-button-wrapper"><ng-content></ng-content></span>