如何像我们在 React 中使用 props 一样制作自定义的可重用角度元素答案

【问题标题】：How to make custom reusable angular elements like we do in React using props如何像我们在 React 中使用 props 一样制作自定义的可重用角度元素
【发布时间】：2019-04-23 19:17:03
【问题描述】：

我想做这样的事情：

 <my-custom-component attr="sdfsdf">
    <div class="bud">
       HHello
    </div>
 </my-custom-component>

我想要的功能是，无论我在自定义元素的开始和结束标记中放入什么内容，它都可以在我的自定义组件 HTML 代码中准确地出现在我想要的位置。像下面这样：

自定义组件.html

 <div>
  hello
  <div> // content goes here if any </div>
 </div>

另一个组件.html

 <custom-component> bla bla </custom-component>

结果：

 <div>
  hello
  <div> bla bla  // content goes here if any  </div>
 </div>

我正在使用 Angular 7

【问题讨论】：

您可以创建 Angular 组件并使用组件选择器在您需要的地方引用它，或者如果您正在寻找组件中的模板代码重用定义 html 代码
你能举个例子吗？

标签： javascript angular angular7

【解决方案1】：

https://angular.io/guide/lifecycle-hooks#content-projection

这里我们可以使用

 <ng-content>

标签告诉 Angular 在嵌套时将内容放在组件中的哪个位置。

【讨论】：