Angular4.0_重定向路由&子路由

重定向路由

重定向路由：用户访问一个特定的地址时，将其重定向到另一个指定的地址。

www.aaa.com  =>  www.aaa.com/products
或者
www.aaa.com/x => www.aaa.com/y

修改app.component.html

<a [routerLink]="['/home']">主页</a>
<!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>

app-routing.module.ts

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";
import {Code404Component} from "./code404/code404.component";

const routes: Routes = [
    {path: '', redirectTo:'/home',pathMatch:'full'},//路由重定向
    {path: 'home', component: HomeComponent},
    {path: 'product/:id', component: ProductComponent},
    {path: '**', component: Code404Component},
];

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

子路由

{path: 'home', component: HomeComponent}

{path: 'home', component: HomeComponent,
  children:[
    {
      path:"",component:XxxComponent
    },{
      path:'/yyy' component:YyyComponent
    }
 ]
}

代码示例：

创建两个新的组件

• ng g component productDesc
• ng g component sellerInfo

在app-routing.module.ts中添加子路由信息

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {ProductComponent} from "./product/product.component";
import {Code404Component} from "./code404/code404.component";
import {ProductDescComponent} from "./product-desc/product-desc.component";
import {SellerInfoComponent} from "./seller-info/seller-info.component";

const routes: Routes = [
    {path: '', redirectTo:'/home',pathMatch:'full'},//路由重定向
    {path: 'home', component: HomeComponent},
    {path: 'product/:id', component: ProductComponent,children:[
        {path: '', component: ProductDescComponent},
        {path: 'seller/:id', component: SellerInfoComponent},
    ]},
    {path: '**', component: Code404Component},
];

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

product-desc.component.html

<p>
  这是一个牛X的商品
</p>

seller-info.component.html

<p>
  销售员ID是{{sellerId}}
</p>

seller-info.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-seller-info',
  templateUrl: './seller-info.component.html',
  styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {

  private sellerId:number;

  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {
      this.sellerId = this.routeInfo.snapshot.params["id"];
  }

}

然后在product.component.html中添加路由插座router-outlet

<p>
  这里是商品信息组件
</p>

<p>
  商品ID是：{{productId}}
</p>

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>

<router-outlet></router-outlet>