我是angular2的新手,我使用的是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>
app.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;
}
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-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, 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;
}