重定向路由
重定向路由:用户访问一个特定的地址时,将其重定向到另一个指定的地址。
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>