angular路由的两种传值方式

第一种

首先是app-routing.module.ts中配置路由组件：

path: 'aboutContent',component: AboutContentComponent

在about.component.html中有：

<div *ngFor="let item of aboutList let key = index">

<a [routerLink]="['/aboutContent']" [queryParams]="{aid:item.query}">{{key}} -- {{item.uname}}</a>

</div>

这样传递的参数会在url中：

http://localhost:4200/aboutContent?aid=about001

第二种：

在app-routing.module.ts中：

path: 'aboutContent/:aid',component: AboutContentComponent

在about.component.html中：

<div *ngFor="let item of aboutList let key = index">

    <a [routerLink]="['/aboutContent',item.query]" 

    routerLinkActive="active" >

    {{key}} -- {{item.uname}}

    </a>

</div>

这样传递的值在url为：

http://localhost:4200/aboutContent/about003

 

 

两种拼接形式不一样