如何从一个 app.component.ts 文件中填充多个选择器？答案

【问题标题】：How do I get multiple selectors to populate from one app.component.ts file?如何从一个 app.component.ts 文件中填充多个选择器？
【发布时间】：2020-03-29 22:30:51
【问题描述】：

我正在尝试在 Angular 8 网站上使用两个选择器。 HTML 会有类似

的东西

<jk-header></jk-header> some html <jk-main-content></jk-main-content>

使用 app.component.ts 如下。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'jk-header',
  templateUrl: './app.HomePageHeader.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'jk';
}

@Component({
    selector: 'jk-main-content',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class JkApp extends AppComponent {
}

只有 jk-header 被填充。尝试了许多不同的东西，但都没有奏效。找不到关于此的任何文档。救命啊！！！

这里是 app.component.html：

<div class="row" style="background-color:#666666">
<div class="col-sm-12">
  <div class="text-center" style="color:white" text-size:4">
     Attorney At Law
    <br>
    address, <br>
    locale<br>
    Telephone:nnnnnnnn <br>
    Facsimile: nnnnnn <br>
    Email:<a href="mailto:xxxxx"> xxxxx</a>><br>
    <a href="directions.htm">
      <span style="color:#660000">
        For
        directions to our office click here</span>
    </a>
  </div>
  </div>
  </div>

【问题讨论】：

你能发app.component.html代码吗？
尝试在堆栈闪电战上创建演示以重现问题
添加了 app.component.html。谢谢普洛奇！
我不确定你想在这里完成什么，看起来你混淆了很多 Angular 的模式。您不应该更改 @Component 中对象中的内容，除非您有充分的理由这样做。我建议你花几个小时在 Angular 英雄教程之旅：angular.io/tutorial

标签： angular css-selectors components

【解决方案1】：

您需要将 JkApp(jk-main-content) 注入 app.module.ts 文件中的 bootstrap 数组，以加载 <jk-header> 和 <jk-main-content> 组件

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, JkApp ],
  bootstrap:    [ AppComponent, JkApp ]
})
export class AppModule { }

这里是 stackblitz 演示 https://stackblitz.com/edit/angular-ndfz9p

【讨论】：

完美——做到了！谢谢！
你能检查一下这个答案是否正确吗？所以您知道，如果其他用户遇到此类问题，这也会对他们有所帮助。
将 JkApp 添加到 app.module.ts 中的声明和引导程序解决了这个问题。你的回答很完美。谢谢 Codeptive Solutions！