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: '',
component:HomeComponent,
children: []
},
{
path:'product/:id',
component:ProductComponent
},
{
path:'**',
component:Code404Component
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<h1>welcome to angular4.0</h1>
<a [routerLink]="['/']">首頁(yè)</a>
<a [routerLink]="['/product',1]" >商品詳情頁(yè)</a>
<input type="button" name="" value="商品詳情" (click)='toProductDetails()'>
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId:number;
constructor(private routeInfo:ActivatedRoute) { }
ngOnInit() {
this.productId=this.routeInfo.snapshot.params['id']
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
