實(shí)現(xiàn)ng2-router路由，嵌套路由
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都做網(wǎng)站、余杭網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、余杭網(wǎng)絡(luò)營(yíng)銷、余杭企業(yè)策劃、余杭品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供余杭建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
首先配置angular2的時(shí)候router模塊已經(jīng)下載，只需要引入即可
重慶分公司
重慶分公司
import {RouterModule, Routes} from "@angular/router";我們要?jiǎng)?chuàng)建一個(gè)嵌套路由，所以需要?jiǎng)?chuàng)建以下文件
實(shí)現(xiàn)效果：
開始配置
index.html界面配置兩點(diǎn)
標(biāo)簽中引入引入路由代碼顯示標(biāo)簽 引入主組件標(biāo)簽
就這么簡(jiǎn)單， index.html界面配置完畢
app.module.ts界面配置路由
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
// 表單 雙向數(shù)據(jù)綁定
import {FormsModule} from "@angular/forms";
import {AppComponent} from "./app.component";
// List中包含兩個(gè)tab子組件
import {ListComponent} from "./list.component";
import {ListOneComponent} from "./list-one.component";
import {ListTwoComponent} from "./list-two.component";
import {HomeComponent} from "./home.component";
// 定義路由, bootstrap默認(rèn)加載組件就是AppComponent,所以他就是主頁(yè)導(dǎo)航頁(yè),然后添加的路由都在他的模板中。
// 可以所有代碼寫在NgModule中, 也可以這樣自定義常量,然后使用。
// 定義常量 嵌套自路由
const appChildRoutes: Routes = [
{path: "one", component: ListOneComponent},
{path: "two", component: ListTwoComponent},
// 如果地址欄中輸入沒(méi)有定義的路由就跳轉(zhuǎn)到one路由界面
{
path: '**', redirectTo: "one"
}
];
// 定義常量 路由
const appRoutes:Routes = [
{path: '', component: HomeComponent},
{
path: 'list',
component: ListComponent,
children: appChildRoutes
];
// 引用定義的路由
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes)
],
declarations: [
AppComponent,
ListComponent,
HomeComponent,
ListOneComponent,
ListTwoComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
這樣就完成了嵌套路由的配置
顯示路由內(nèi)容
app.component.ts
import {Component} from "@angular/core";
@Component({
selector: "my-app",
// templateUrl: "../views/one.html"
template: `
list.component.ts
import {Component} from "@angular/core";
@Component({
selector: "my-list",
// templateUrl: "../views/list.html"
template: `
`
})
export class ListComponent {
name = "list";
}
list-one.component.ts
import {Component} from "@angular/core"
@Component({
selector: "my-list-one",
template:`
{{name}}
`
})
export class ListOneComponent {
name = "list-one";
}list-two.component.ts同理
獲取路由參數(shù)id (about:id) 添加模塊 ActivatedRoute
import {ActivatedRoute} from "@angular/router";
export class AboutList {
id: Object;
constructor(public route:ActivatedRoute) {
this.id = {};
}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params // {id: "xxx"}
});
}
}
直接獲取id值
this.route.snapshot.params["id"]
補(bǔ)助： 路由中的界面跳轉(zhuǎn)
import {Router} from "@angular/router";
constructor(public router: Router) {
// 相當(dāng)于window.location.href，界面跳轉(zhuǎn)
router.navigateByUrl('home');
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
