使用angular2路由器

时间:2017-02-04 05:26:17

标签: javascript angular typescript

我是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;
}

0 个答案:

没有答案