route.snapshot

时间:2018-06-27 19:00:22

标签: angular

我有一个组件ThreadsComponent,可以通过由主题(示例中的LightDark)和类别(Darth Sidious组成的导航栏元素来更改或示例中的Darth Vader

example

单击一个类别(在示例中为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?因为从我的研究中,我只发现了数据绑定元素。

预先感谢您的帮助。

0 个答案:

没有答案