子组件未在主要组件中呈现角度。 当我点击按钮时，它的渲染很容易

Question

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

主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;
  }