node.js - <slot> Angular 5 中的功能

Question

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

• 前端:Vue
• 后端:NodeJs

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

任何人都可以建议在 Angular4 之后实现相同的解决方案吗？

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>