在AppComponent内将多个组件添加到[封闭式]

问题描述 投票:-3回答:2
我想知道是否有可能添加多个组件,如的Component1,Cmponent2内AppComponent如下面的代码,但似乎不工作我缺少什么吗?(​​忽略这个如此抱怨)ajxbajcbjascjajcabcajbcbajbcajbcjbascbjajbcjacbacjajcacbacbjabcajbcbjabcjajbcabjcjbacbjajbcbajcbjajbcabjcajbcbacbjajbcbjacbjabjcbjacbjajbcajbcbjacbjajbcbjabjcbjacbja

import { Component,Directive,ElementRef, APP_BOOTSTRAP_LISTENER } from '@angular/core'; @Component({ selector: 'app-root', template: ` <second-component> test second </second-component> <third-component> test third </third-component> `, styles: [` `] }) export class AppComponent { } @Component({ selector: 'second-componet', template: ` <h1> test </h1> `, styles: [` `] }) export class SecondCompoent{ } @Component({ selector: 'third-componet', template: ` <h1> test </h1> `, styles: [` `] }) export class ThirdCompoent{ }

angular typescript
2个回答
2
投票
我猜您想显示出现在

component tags内部的文本,以显示在应用程序组件中。这称为content-projection,您可以使用ng-content来实现。像这样修改您的代码

import { Component,Directive,ElementRef, APP_BOOTSTRAP_LISTENER } from '@angular/core'; @Component({ selector: 'app-root', template: ` <second-component> test second </second-component> <third-component> test third </third-component> `, styles: [` `] }) export class AppComponent { } @Component({ selector: 'second-componet', template: ` <h1> test </h1> <ng-content></ng-content> `, styles: [` `] }) export class SecondCompoent{ } @Component({ selector: 'third-componet', template: ` <h1> test </h1> <ng-content></ng-content> `, styles: [` `] }) export class ThirdCompoent{ }
注意在SecondComponent和ThirdComponent的模板中添加了

ng-content

请找到示例stack-blitz

有关ng-content check this的详细讨论。

谢谢。


0
投票
是的,有可能。选择器中有错字,请查看selector: 'second-componet',selector: 'third-componet',
热门问题
推荐问题
最新问题