无法在 angular 组件中放置 html 个元素

Question

我是创建 angular 网络组件的新手。我正在努力寻找一种方法将 html 元素嵌入 angular 组件

<stepper>
    <step title="1"></step>
    <step title="2"></step>
    <step title="3"></step>

    <h1>THIS IS JUST A TEST</h1>
</stepper>

每次我运行故事书上的组件（我的意思是在 .stories.ts 里面）

我添加的 h1 标签根本不显示。为了在我当前创建的组件上嵌入 html 标签，是否有任何要求或必要的事情要做？

但是当我将 h1 标签放在组件外部时它起作用了

    <stepper>
        <step title="1"></step>
        <step title="2"></step>
        <step title="3"></step>
    </stepper>
<h1>THIS IS JUST A TEST</h1>

谢谢！

Answer 1

您需要在 <stepper> 组件模板中使用内容投影 (https://angular.io/guide/content-projection)。

template:'
  // existing template
  <ng-content></ng-content>
  // existing template
'

您在 stepper 中放入的任何内容都将被插入以代替 ng-content。

无法在 angular 组件中放置 html 个元素

unable to place html elements inside angular component

components

angular