[英]Implementing queryParams in Angular routing
当我单击特定文本时,我试图将 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;
});
对我不起作用。
这是所有控制台日志的屏幕截图
我建议你在 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 }});
}
...
根据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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.