如何在Angular和TypeScript中修改routerLink

Question

我在标题中有一些菜单。现在我想以编程方式向所有标题菜单添加查询字符串参数。我的代码是这样的

<nav class="menu-links">
<ul class="postlogin">        
<li><a routerLink="/passenger/home" routerLinkActive="active">Home</a></li>
<li><a routerLink="/passenger/myride" routerLinkActive="active">My Ride</a></li>
<li><a routerLink="/passenger/profile" routerLinkActive="active">Profile</a></li>       
</ul> </nav>

我的最终代码将是这样的:

<nav class="menu-links">
<ul class="postlogin">        
<li><a routerLink="/passenger/home?pi=160016" routerLinkActive="active">Home</a></li>
<li><a routerLink="/passenger/myride?pi=160016" routerLinkActive="active">My Ride</a></li>
<li><a routerLink="/passenger/profile?pi=160016" routerLinkActive="active">Profile</a></li>       
</ul> </nav>

我想从一个页面的ngOnInit方法来做这个。

ngOnInit(): void {
//add query string to all the header menu
}

我用的是Angular 13和typescript。

我在一个jQuery项目中这样做了:

$('a[class="aff-menu-item"]').each(function () {
var oldUrl = $(this).attr("href");
var newUrl = oldUrl + "?pi=160016";
$(this).attr("href", newUrl);
});

Answer 1

您可以将参数从子组件传递到父组件，也可以将参数从父组件传递到子组件。

最好的方法是创建一个服务并使用这个服务传输参数。

服务代码:

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class QueryStringService {
constructor() { }
message: string = "";
setQueryString(data) {
this.message = data;
}
getQueryString() {
return this.message;
}
}

子组件代码:

ngOnInit(): void {    
this.queryStringService.setQueryString(Id);

}

菜单组件代码:

queryString: string = "";
constructor(
private queryStringService: QueryStringService
) { }
ngOnInit(): void {
this.queryString = this.queryStringService.getQueryString();    
}

<li><a routerLink="/passenger/home" [queryParams]="{pi
:queryString }" routerLinkActive="active">Home</a></li>
<li><a routerLink="/passenger/myride" [queryParams]="{pi
:queryString }" routerLinkActive="active">My Ride</a>
</li>
<li><a routerLink="/passenger/profile" [queryParams]="{pi
:queryString }" routerLinkActive="active">Profile</a></li>

Answer 2

正如Angular文档中所解释的，你可以使用属性绑定:

HTML代码:

<nav class="menu-links">
<ul class="postlogin">        
<li><a [routerLink]="'/passenger/home' + query"  routerLinkActive="active">Home</a></li>
<li><a [routerLink]="'/passenger/myride' + query" routerLinkActive="active">My Ride</a></li>
<li><a [routerLink]="'/passenger/profile' + query" routerLinkActive="active">Profile</a></li>       
</ul> </nav>

TS代码:

query:string="";
ngOnInit(): void {
this.query="?pi=160016";
}