Angular 5中的<slot>功能

Question

我正在开发一个SPA(单页面应用程序)，我使用Vue框架进行开发。

• 前端：Vue
• 后端：NodeJs

在我的应用程序中，我有其他用Angular 4编写的子模块，我想在Angular中编写由Vue提供的功能。
这里是可以解释<slot>功能的链接。

有人能建议一下如何在Angular 4及以后版本实现相同的功能吗？

- user10549656

Answer 1

这被称为转换，通过Angular使用ng-content实现。

可以在网上查看一些教程，例如https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

这使您可以创建如下组件：

@Component({
  selector: 'app-component',
  template: `<div class="container"><ng-content></ng-content></div>`
})
export class AppComponent {}

在你的 HTML 中：

<app-component>Some text</app-component>

将被渲染为：

<div class="container">Some text</div>

即使您有多个要替换的内容，也可以使用命名为ng-content的方式。例如 -

<ng-content select="[card-body]"></ng-content>

- user4676340

---

只需添加一个代码示例，使其具有回答价值。 - Marty

@Marty 很棒的想法，我会去做的。 - user4676340

@PardeepJain，虽然我们正在讨论SOF的最佳实践，但你应该删除你的答案，因为它与我的重复了，而是给我的答案点赞。如果你这样做我不介意，但如果你想保持一致，那就应该是你的下一步 :) - user4676340

@trichetriche 不错，完成了。我希望你不介意，我已经用我的答案编辑了你的答案添加了一些新内容。 - Pardeep Jain

@iamrajshah 没问题，很高兴能帮到你！ - user4676340