angular4-路由
阿新 • • 發佈:2017-09-02
size forms ont const 世界 out lar rms sel
導入,配置路由信息
import { Routes, RouterModule } from ‘@angular/router‘; import { UserComponent } from ‘./user.component‘; export const ROUTES: Routes = [ {
path: ‘user‘,
component: UserComponent ,
outlet:‘left‘
}
{
path: ‘user‘,
component: UserComponent ,
outlet:‘right‘
}
];
@NgModule({ imports: [ BrowserModule, RouterModule.forRoot(ROUTES)], // ... })
export class AppModule {}
routerLink 指令
<nav> <a routerLink="/">首頁</a> <a routerLink="/user">我的</a> </nav>
router-outlet 指令(該指令用於告訴 Angular 加載組件的文檔位置,當 Angular 路由匹配到響應路徑,並成功找到需要加載的組件時,它將動態創建對應的組件,並將其作為兄弟元素,插入到 router-outlet
元素中。)
@Component({ selector:‘app-root‘, template: ` <div class="app"> <h3>Our app</h3> <router-outlet name="left"></router-outlet>//出口1
<router-outlet name="right"></router-outlet>
</div> ` }) export class AppComponent {}
路由使用eg:
配置路由信息 export const ROUTES: Routes = [ { path:‘‘, pathMatch: ‘full‘, redirectTo: ‘user‘ }, { path: ‘user‘, component: UserComponent }, { path: ‘members‘, component: MembersComponent } ]; @NgModule({ imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(ROUTES)], // ... }) export class AppModule { }
配置路由導航 import { Component } from ‘@angular/core‘; @Component({ selector: ‘my-app‘, template: ` <div class="app"> <h1>歡迎來到Angular的世界</h1> <nav> <a routerLink="/user">我的</a> <a routerLink="/members">Angular成員</a> </nav> <router-outlet></router-outlet> </div> `, }) export class AppComponent { }
angular4-路由