角5中的<slot>功能

Question

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

• 前端: Vue
• 后端: NodeJs

在我的应用程序中，我有用角4编写的其他子模块，我想用角编写Vue提供的功能。

这里是可以解释<slot>功能的链接。

有人能建议在Angular4中实现同样的解决方案吗？

Answer 1

这就是所谓的转换，是通过角度用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>