我有一个组件ThreadsComponent
,可以通过由主题(示例中的Light
或Dark
)和类别(Darth Sidious
组成的导航栏元素来更改或示例中的Darth Vader
。
单击一个类别(在示例中为Yoda
)后,即使我的路线发生了更改,也无法用另一个类别刷新页面:
例如http://localhost:3000/threads?themeId=5b339149cf753310de75e2ed&categoryId=5b33915ccf753310de75e2ef
我该如何解决这个问题?
在我使用的代码下面:
我的topbar.component.html
的摘录:
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/admin">Admin</a>
</li>
<li class="nav-item dropdown" *ngFor="let theme of themes$ | async">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span [innerHTML]="theme.iconCode"></span>
{{theme.name}}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li *ngFor="let category of theme.categories">
<a class="dropdown-item" [routerLink]="['/threads']" [queryParams]="{ themeId: theme._id, categoryId: category._id }">
{{category.name}}
</a>
</li>
</ul>
</li>
</ul>
我的thread.component.ts
的摘录:
export class ThreadsComponent implements OnInit {
themeId: string;
categoryId: string;
category$: Observable<Category>;
threads$: Observable<Thread[]>;
constructor(private route: ActivatedRoute,
private sectionStoreService: SectionStoreService,
private threadStoreService: ThreadStoreService) { }
ngOnInit() {
this.themeId = this.route.snapshot.queryParamMap.get('themeId');
this.categoryId = this.route.snapshot.queryParamMap.get('categoryId');
this.category$ = this.sectionStoreService.categories
.pipe(
map(categories => categories.find(item => item._id === this.categoryId))
);
this.sectionStoreService.getThemeCategory(this.themeId, this.categoryId);
this.threads$ = this.threadStoreService.threads;
this.threadStoreService.getCategoryThreads(this.categoryId);
}
我的threads.component.html
的摘录:
<div class="container" *ngIf="category$ | async as category; else loading">
<div class="category-presentation">
<h2>{{category.name}}</h2>
<p>{{category.description}}</p>
</div>
是否可以对路径参数进行OnChanges
?因为从我的研究中,我只发现了数据绑定元素。
预先感谢您的帮助。