如何在 Angular 中使用内容投影(又名嵌入) [英] How to use content projection (aka transclusion) in Angular

问题描述

我是 angular 4 的新手.

我对 angular 4 嵌入式组件有疑问.

示例:

<英雄列表><英雄>​​</英雄><英雄>​​</英雄></英雄列表>

我想知道如何基于这种将组件嵌入另一个组件中的结构创建视图.

解决方案

你应该在 hero-list 中使用 </ng-content>代码>-组件.这样你就可以实现上面的愿望了.

hero-list.component.html

<h1>英雄列表</h1><ng-content></ng-content>

现在你可以包装你的 hero-item-components，它们将被打印在 hero-listcomponents 内.

app.component.html

<英雄列表><英雄物品></英雄物品><英雄物品></英雄物品></英雄列表>

这是工作示例:https://stackblitz.com/edit/angular-nvpmtc

而且这里 是一篇关于内容投影的好文章角度.

I am new to angular 4.

I have a doubt in angular 4 embedded components.

example:

<hero-list>
    <hero></hero>
    <hero></hero>
</hero-list>

I wanted to know how to create a view based on this structure that is embedding component inside another component.

解决方案

You should use <ng-content></ng-content> in your hero-list-component. So you can realize your wish above.

hero-list.component.html

<div class="hero-list">
  <h1>Hero list</h1>
  <ng-content></ng-content>
</div>

And now you can wrap your hero-item-components and they will be printed inside of hero-listcomponent.

app.component.html

<hero-list>
  <hero-item></hero-item>
  <hero-item></hero-item>
</hero-list>

Here is working example: https://stackblitz.com/edit/angular-nvpmtc

And here is a good article about content projection in angualr.

这篇关于如何在 Angular 中使用内容投影(又名嵌入)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！