我正在开发一个SPA(单页面应用程序),我使用Vue框架进行开发。
- 前端:Vue
- 后端:NodeJs
在我的应用程序中,我有其他用Angular 4编写的子模块,我想在Angular中编写由Vue提供的功能。
这里是可以解释<slot>
功能的链接。
有人能建议一下如何在Angular 4及以后版本实现相同的功能吗?
这被称为转换,通过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 {}
<app-component>Some text</app-component>
将被渲染为:
<div class="container">Some text</div>
即使您有多个要替换的内容,也可以使用命名为ng-content
的方式。例如 -
<ng-content select="[card-body]"></ng-content>