如何制作自定义可重用 angular 元素，就像我们在 React 中使用 props 所做的那样

Question

我想做这样的东西：

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

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

自定义-component.html

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

另一个-component.html

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

结果：

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

我正在使用 Angular 7

Answer 1

这里我们可以使用

 <ng-content>

标签告诉 angular 嵌套时将内容放在组件中的什么位置。

How to make custom reusable angular elements like we do in React using props