当我单击特定文本时,我试图将queryParams添加到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;
});
对我不起作用。
这是所有控制台日志的屏幕截图
答案 0 :(得分: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 }});
}
...
答案 1 :(得分:0)
根据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>
感谢您进行任何修改