如果您喜欢Angular，那么有时您会拥有一个可以容纳多个其他组件的组件。
在我的最新用例中，这实际上是一个基本样式的组件，符合card组件。
如果需要，它具有边框，框阴影，标题和图标。
在此卡组件内部，可以呈现多个项目，博客文章，播客，内容页面等。
如果您正在考虑，但是可以将此卡片样式添加到每个组件中吗？
是的，但是想像一下卡片布局会发生变化，现在您必须使用该样式来编辑组件。
创建一个顶层组件并包含其中的组件，您只需更新一次代码即可。
这就是Angular包含的地方，这意味着我们的组件中有一个可交换的部分。
超级高级的视觉表示。
创建我们的包含组件
在本文中，我们将使用来自GitHub的Angular 10 Tailwind主应用程序。
现在让我们开始生成该卡组件。
ng generate component Card
这将生成我们的基本组件，让我们打开TS文件并进行以下更改。
import {Component, Input} from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html'
})
export class CardComponent {
@Input() title: string;
@Input() icon: string;
constructor() {}
}
在这里，您可以看到我们有两个Angular @Input属性，它们可以为我们的卡片添加标题和可选图标。
现在，我们可以添加HTML。
<div class="flex flex-row mb-5 overflow-hidden bg-white rounded-lg shadow-lg">
<div class="flex flex-col w-full p-6 text-dark-gray-600">
<div class="flex justify-between mb-4">
<span class="uppercase">{{ title }}</span>
<i *ngIf="icon">{{ icon }}</i>
</div>
<ng-content></ng-content>
</div>
</div>
这就是魔力出现的地方，您会看到该<ng-content>元素，它将在卡组件内渲染任何内容。
让我们尝试一下。
打开welcome.component.html并添加以下代码：
<div class="container p-6 m-auto">
<app-card title="Welcome" icon="✌️">
<h1>Anything in here is content!</h1>
</app-card>
</div>
因此，在此示例中，我们添加了一个带有静态标题和图标的新应用卡。
注意：您可以使用
=“ dynamicProp”使此动态
在应用卡内，我们指定呈现的内容ng-content。在我们的情况下，现在是一个简单的标头。
到目前为止的结果：
在另一个Angular组件中渲染组件
这个用例很有趣，但是我们大多数时候都想在其中渲染其他组件。
让我们生成一个播客组件。
ng generate component Podcast
现在，让我们HTML为此演示添加一些静态内容。
<div
class="w-full h-24 mb-3 bg-center bg-cover rounded-lg"
[style.background-image]="'url(' + img + ')'"
></div>
<strong class="block mb-2">Episode 142: Ionic vs Flutter</strong>
<p>
In todays episode we are talking to Michael about how Flutter compares to Ionic.
</p>
<audio controls class="w-full mt-4">
<source src="podcast.ogg" type="audio/ogg" />
<source src="podcast.mp3" type="audio/mpeg" />
Your browser does not support the audio tag.
</audio>
只需简单的设置。现在，从Typescript加载图像：
img: string =
'https://images.unsplash.com/photo-1606592641978-bbfa15596820?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80';
现在让我们将此组件添加到我们的卡中：
<app-card title="Podcast" icon="🎧">
<app-podcast></app-podcast>
</app-card>
现在将显示为：
命名包含部分
我们可以做的一件很酷的事情是命名包含插槽。
打开card-component.html文件并更改ng-content以包括以下内容：
<ng-content select="[body]"></ng-content>
现在，我们可以将welcome.component.html更改如下：
<app-card title="Podcast" icon="🎧">
<app-podcast body></app-podcast>
</app-card>
角多槽包含
命名这些插槽的功能在于可以为一个组件添加多个。
假设我们想要一个可以动态变化的主体和页脚部分。
现在我们已经有此主体部分，但让我们可以添加页脚。
更改card.component.html：
<div class="flex flex-row mb-5 overflow-hidden bg-white rounded-lg shadow-lg">
<div class="flex flex-col w-full p-6 text-dark-gray-600">
<div class="flex justify-between mb-4">
<span class="uppercase">{{ title }}</span>
<i *ngIf="icon">{{ icon }}</i>
</div>
<ng-content select="[body]"></ng-content>
<ng-content select="[footer]"></ng-content>
</div>
</div>
如您所见，我们添加了第二ng-content部分footer。
现在，让我们也进行修改welcome.component.html以向其中添加一些数据。
<app-card title="Podcast" icon="🎧">
<app-podcast body></app-podcast>
<div class="mt-2 italic" footer>Thank you for listening</div>
</app-card>
因此，这个示例有些奇怪，但是您可以看到我们有两个转储槽。
这将导致以下结果：
渲染不同的组件
如上所述，真正的功能是将多种组件类型渲染为一个卡组件。
让我们为播客定义另一个组件。
ng generate component Video
让我们对video.component.html文件进行一些更改。
<strong class="block mb-2">6 everyday JavaScript tips you must know</strong>
<p>In this video i'll guide you to create a super cool Todo list</p>
<iframe
width="100%"
height="250px"
src="https://www.youtube.com/embed/svFffyg_m0M"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
现在我们可以将此块添加到welcome.component.html。
<app-card title="Video" icon="📼">
<app-video body></app-video>
<div class="mt-2 italic" footer>Thanks for viewing</div>
</app-card>
结果
在上图中，您可以看到卡的样式相同。我们在中间有标题，图标和一个新的播客组件。
我希望您已经看到了使用包容性使我们的生活更轻松的大量好用例。
您可以在以下GitHub存储库中找到完成的结果。
感谢您的阅读，让我们联系！
感谢您阅读我的博客。随时订阅我的电子邮件通讯并在Facebook或Twitter上进行连接
