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

Question

我正在尝试在Angle 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>

Answer 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