Javascript 使用angular2路由器从特定页面删除组件

我是anguar2的新手，正在使用anguar2路由器。现在我想隐藏或删除登录页面的标题，下面是我的结构

app.component.html

<md-sidenav-layout fullscreen>
<app-sidebar #sidenav class="sidebar" *ngIf="toggleComponent"></app-sidebar>
<app-header (open)="sidenav.OpenSidebar($event)" *ngIf="toggleComponent"></app-header>
<section class="main-content">
    <router-outlet></router-outlet>
</section>

<md-toolbar color="accent">
<button md-icon-button (click)="OpenSidebarNav()"><md-icon>menu</md-icon></button>
<span>Application Title</span>
<span flex></span>
<md-input-container flex="30" *ngIf="searchForm" [@searchAnimation]="searchForm">
   <input md-input placeholder="Search here">
</md-input-container>
<button md-icon-button (click)="searchForm = !searchForm"><md-icon>search</md-icon></button>

app.routing.ts

import { LoginComponent } from './account/login/login.component';
import { ListingComponent } from './listing/listing.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/listing/accommodation', pathMatch: 'full' },
    { path: 'listing/:wt_type', component: ListingComponent },
    { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(APP_ROUTES) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

heade.component.html

<md-sidenav-layout fullscreen>
<app-sidebar #sidenav class="sidebar" *ngIf="toggleComponent"></app-sidebar>
<app-header (open)="sidenav.OpenSidebar($event)" *ngIf="toggleComponent"></app-header>
<section class="main-content">
    <router-outlet></router-outlet>
</section>

<md-toolbar color="accent">
<button md-icon-button (click)="OpenSidebarNav()"><md-icon>menu</md-icon></button>
<span>Application Title</span>
<span flex></span>
<md-input-container flex="30" *ngIf="searchForm" [@searchAnimation]="searchForm">
   <input md-input placeholder="Search here">
</md-input-container>
<button md-icon-button (click)="searchForm = !searchForm"><md-icon>search</md-icon></button>

菜单
申请名称
搜索

header.component.ts

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

import { HeaderComponent } from './partials/header/header.component';
import { SidebarComponent } from './partials/sidebar/sidebar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  toggleComponent: boolean = true;
}

import { Component, Output, EventEmitter, trigger, transition, style, animate } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  animations: [
    trigger(
      'searchAnimation',
      [
        transition(
        ':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('300ms', style({transform: 'translateX(0)', opacity: 1}))
        ]
      ),
      transition(
        ':leave', [
          style({transform: 'translateX(0)', 'opacity': 1}),
          animate('300ms', style({transform: 'translateX(100%)', opacity: 0})),
        ]
      )]
    )
  ]
})
export class HeaderComponent {
  @Output() open = new EventEmitter<boolean>();

  OpenSidebarNav() {
    this.open.emit(true);
  }

  searchForm: boolean = false;
}

import{Component，Output，EventEmitter，trigger，transition，style，animate}来自“@angular/core”；
@组成部分({
选择器：“应用程序标题”，
templateUrl:'./header.component.html'，
动画：[
触发(
“搜索动画”，
[
过渡(
“：输入”[
样式（{transform:'translateX（100%）'，不透明度：0}），
动画（'300ms'，样式（{transform:'translateX（0）”，不透明度：1}））
]
),
过渡(
“：离开”[
样式（{transform:'translateX（0）'opacity:'1}），
动画（'300ms'，样式（{transform:'translateX（100%），不透明度：0}）），
]
)]
)
]
})
出口类标题组件{
@Output（）open=neweventemitter（）；
OpenSidebarNav（）{
this.open.emit（true）；
}
searchForm:boolean=false；
}

用你的应用标题组件更新帖子可能你需要了解Angular2中的共享服务是什么，以及如何在组件之间使用它。。。