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

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

[<6天前关闭。

我想知道是否有可能添加多个组件，如的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{

}

Answer 1

我猜您想显示出现在

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的详细讨论。

谢谢。

Answer 2

是的，有可能。选择器中有错字，请查看selector: 'second-componet',和selector: 'third-componet',