Question

有人告诉我为Angular应用程序中的所有共享组件制作几个标签，以便可以进行即时更改和更好的管理。因此，该页面将主要包含以下组件，例如：

<cx-card>
  <cx-lbl>Some text</cx-lbl>
  <cx-btn>Click Me</cx-btn>
</cx-card>

我的问题是：

一些真实的例子应该是完美的，但是即使是一些参考文献的链接也会有所帮助。先感谢您！很抱歉出现菜鸟问题。

Answer 1

您应该利用ng-content标签。这会将标签内的内容投射到组件本身中。

因此您的cx-card组件的HTML可能是

。

<div class="cx-card">
  <ng-content></ng-content>
</div>

现在，<cx-card>...</cx-card>之间的任何内容都将显示在您将ng-content组件的HTML中放置cx-card标签的位置。

cx-label和cx-btn也是如此。在其HTML中使用ng-content来显示Some Text和Click Me。为此，您还可以利用每个组件的@Input属性。像这样：

在cx-label组件TS中：

@Input() text: string;
....HTML...
<div class="cx-label">{{text}}</div>
....HTML where it is used....
<cx-lbl [text]="'Some text'"></cx-label>

在cx-btn组件中：

@Input() text: string;
...HTML...
<div class="cx-btn">{{text}}</div>
...HTML where it is used...
<cx-btn [text]="'Click Me'"></cx-btn>

我个人会为按钮和标签做@Input，为ng-content做cx-card。