角度为5的<slot>功能

Question

我正在使用SPA(单页面应用程序),我使用Vue框架来开发应用程序.

• 前端:Vue
• 后端:NodeJs

在我的应用程序中,我有其他以角度4编写的子模块,我想用角度来编写Vue提供的功能.
这是可以解释<slot>功能的链接.

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

Answer 1

这称为包含,ng-content通过Angular 实现.

在线查看一些教程,例如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>