javascript - 子组件未在主组件中以 Angular 呈现。当我点击按钮时它会单独渲染

Question

我有一个名为 main-header 的主要组件，其中有一个菜单，其中包含三个标记为“桌面”、“Web”和“移动”的按钮。当我单击菜单按钮时，它会在新屏幕中呈现，但我想在新屏幕中呈现我的主要组件是 main-header。

ma​​in-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>

desktop.component.html

<p>
  desktop works!
</p>

app.routes.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {MainHeaderComponent} from './containers/main-header/main-header.component';
import {DesktopComponent} from './containers/desktop/desktop.component';
import {WebComponent} from './containers/web/web.component';
import {MobileComponent} from './containers/mobile/mobile.component';


export const router: Routes =[
    {path: '', redirectTo:'main-header', pathMatch: 'full'},
    {path: 'main-header', children:[
        {path:'', component:MainHeaderComponent, pathMatch:'full'},
        {path: 'desktop', component:DesktopComponent},
        {path: 'web', component: WebComponent},
        {path: 'mobile', component: MobileComponent}
    ]}
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Answer 1

当您需要时，组件会显示它，而不是路由。

<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>

父组件将具有如下内容:

export class ParentComponent {

  private showComponent = false;

  constructor() { }

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

  public isTrue() {
    return this.showComponent;
  }