在 Angular 路由中實現 queryParams

Question

當我單擊特定文本時，我試圖將 queryParams 添加到 url，但它在這里不起作用。 我無法在我的 url 上看到任何 queryParams。

這是我的 HTML 文件和組件文件

html文件

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" 
         routerLink="/"
         routerLinkActive="active"
         [queryParams]="{category:c.name}"
         >
           {{c.name}}
         </a>
     </ul>
  </div>
</div>

.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../auth/auth.service';
import { UserService } from '../auth/user.service';
import { FirebaseUserModel } from './user.model';
import { Subscription } from 'rxjs';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
 })
export class HomeComponent implements OnInit{

user: FirebaseUserModel = new FirebaseUserModel();
profileForm: FormGroup;
products;
categories;
query;
filteredproducts;
subscription: Subscription;

constructor(
public userService: UserService,
public authService: AuthService,
private route: ActivatedRoute,
private fb: FormBuilder,
private prservice: ProductsService, private iservice: ItemsService, 
private activatedrouter: ActivatedRoute
 ) {

}

ngOnInit(){
this.route.data.subscribe(routeData => {
  let data = routeData['data'];
  console.log(data)
  if (data) {
    this.user = data;
    this.createForm(this.user.name);
  }
})
this.subscription = this.iservice.getdata().subscribe(data => {
  this.products = data;
console.log(this.products);

  this.activatedrouter.queryParams.subscribe(p => {
    this.query = p['category'];
    console.log(this.query)

    this.filteredproducts = this.categories?this.products.filter(p => p.select === this.query):this.products;
   });
});
this.subscription = this.iservice.getitems().subscribe(categ => {
  this.categories = categ;
  console.log(this.categories)
});
}

OnDestroy() {
this.subscription.unsubscribe();
}

createForm(name) {
this.profileForm = this.fb.group({
  name: [name, Validators.required ]
});

}

save(value){
this.userService.updateCurrentUser(value)
.then(res => {
  console.log(res);
}, err => console.log(err))
}


}

所以我看不到

console.log(this.query) //it throws undefined

在我的控制台中，這意味着

  this.activatedrouter.queryParams.subscribe(p => {
    this.query = p['category'];
    console.log(this.query)

    this.filteredproducts = this.categories?this.products.filter(p => p.select === this.query):this.products;
   });

對我不起作用。

這是所有控制台日志的屏幕截圖

https://ibb.co/r5QXmGc

Answer 1

我建議你在 html 上使用一個函數：

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" routerLinkActive="active" (click)="navigate(c.name)">
           {{c.name}}
         </a>
     </ul>
  </div>
</div>

並在您的控制器中：

import { ActivatedRoute, Router } from '@angular/router';
...
private route: Route,
private activatedrouter: ActivatedRoute,
...
navigate(catName: string): void {
  this.activatedrouter.navigate(['.'], { relativeTo: this.route, queryParams: {category: catName }});
}
...

Answer 2

根據RouterLink的官方Angular文檔

routerLink 指令的輸入應該是一個數組。 因此，請更改代碼中的以下行

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" 
         [routerLink]="['/']" --> changed this
         routerLinkActive="active"
         [queryParams]="{category:c.name}"
         >
           {{c.name}}
         </a>
     </ul>
  </div>
</div>