Javascript 子组件未在角度视图的主组件中渲染。当我点击按钮时，它会单独呈现

我有一个名为main header的主组件，它有一个菜单，菜单上有三个按钮，分别标记为“桌面”、“Web”和“移动”。当我单击菜单按钮时，它会在一个新屏幕中呈现，但我想在我的主组件（即主标题）中呈现

main header.component.html

<div class="main-header">
    <h1>{{appTitle}}</h1>
    <button type=""><a routerLink="/main-header/desktop">Desktop</a></button>
    <button type=""><a routerLink="/main-header/web">Web</a></button>
    <button type=""><a routerLink="/main-header/mobile">Mobile</a></button>
</div>
<router-outlet></router-outlet>

<p>
  desktop works!
</p>

---

不布线，而是在需要时显示组件

<div class="main-header">
    <h1>{{appTitle}}</h1>
    <button type=""><a href="javascript: void(0)"(click)="changeBoolean()">Desktop</a></button>
</div>
<child-compoent *ngIf="istrue()"></child-component>

---

不布线，而是在需要时显示组件

<div class="main-header">
    <h1>{{appTitle}}</h1>
    <button type=""><a href="javascript: void(0)"(click)="changeBoolean()">Desktop</a></button>
</div>
<child-compoent *ngIf="istrue()"></child-component>

---

您可以使用*ngIf并在父组件中声明子组件。单击按钮后，将布尔值更改为true，以显示需要具有适当父页面的组件，因此，将

component:MainHeaderComponent

添加到第二个父路径，而不是第一个子路径。我喜欢angularjs标记从angularjs项目中删除的方式。对于涉及AngularV2+的问题，请不要添加angularjs标记。用于询问有关AngularJS（开源JavaScript框架）的问题。不要将此标签用于Angular 2或更高版本；相反，使用“角度”标记@mast3rd3mon有一个很好的理由…这是一个angularjs问题，它使用divs您可以使用*ngIf并在父组件中声明子组件。单击按钮后，将布尔值更改为true，以显示需要具有适当父页面的组件，因此，将

component:MainHeaderComponent

添加到第二个父路径，而不是第一个子路径。我喜欢angularjs标记从angularjs项目中删除的方式。对于涉及AngularV2+的问题，请不要添加angularjs标记。用于询问有关AngularJS（开源JavaScript框架）的问题。不要将此标签用于Angular 2或更高版本；相反，使用“角度”标记@mast3rd3mon有一个很好的理由…这是一个angularjs问题，它使用divsistrue（）是一个方法，它将在单击按钮时被调用以使属性为真？单击按钮时调用changeBoolean。然后，在组件中将布尔值更改为true，isTrue（）返回之前更改的布尔值。Angular每次都在求值changeistrue（）是一个方法，它将在单击按钮时被调用以使属性为真？单击按钮时，将调用changeBoolean。然后，在组件中将布尔值更改为true，isTrue（）返回之前更改的布尔值。Angular正在评估每次发生的变化

export class ParentComponent {

  private showComponent = false;

  constructor() { }

  public changeBoolean() {
    this.showComponent = true;
  }

  public isTrue() {
    return this.showComponent;
  }