时间戳

首页 > 解决方案 > 在 Angular 中自定义共享组件

angular - 在 Angular 中自定义共享组件

问题描述

有人告诉我为 Angular 应用程序中的所有共享组件制作几个标签，这样就可以进行即时更改并进行更好的管理。所以页面会主要包含这些组件，比如：

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

我的问题是：

  1. 组件单独工作时可以正常工作，但标签/按钮在卡片内时不会出现。我该如何解决？
  2. 默认情况下，我的组件是空的（只有设计是预设的）。但在上面的例子中，“一些文字”和“点击我”都没有出现。如何使它成为可能？

一些真实的例子应该是完美的，但即使是一些参考的链接也会有所帮助。先感谢您！对不起菜鸟问题。

标签： angular

解决方案

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

所以你的cx-card组件的 HTML 可能是。

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

现在，介于两者之间的<cx-card>...</cx-card>内容将出现在您在组件的 HTML中放置ng-content标签的位置。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.

https://blog.angular-university.io/angular-ng-content/（真正深入了解ng-content）。

推荐阅读