分配默认值路由参数时遇到问题

Question

我在为组件 ts 类内部的路由参数分配默认值时遇到问题。我希望 genericId 默认为 null。我希望货币化、排序依据和页面具有默认值。我不确定我是否应该在 ngOninit 内部执行此操作，或者是否应该在我的应用程序路由模块内部以某种方式执行此操作。

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string | null = null;
  monetization?: string | null;
  sortBy?: string | null;
  page?: string | null;
  constructor(private getMovies: GetMoviesService,
              private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.route.queryParamMap.subscribe((params: ParamMap) => {
      this.genreId = params.get('genreId')
    })
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.monetization = params.get('monetization');
      this.sortBy = params.get('sortBy');
      this.page = params.get('page');
    });
    if (this.genreId === null) {
      this.getMovies.moviesData(this.monetization, this.sortBy, this.page).subscribe((movieData: MovieData) => {
        if (movieData !== undefined) {
          this.movies = movieData;
        }
      })
    }
  }
}

我的应用程序路由模块数组如下所示。

const routes: Routes = [
  {path: ' ', pathMatch: 'full', redirectTo: '/:monetization/:sortBy/:page'},
  {path: '/:monetization/:sortBy/:page/', pathMatch: 'full', component: MoviesPageComponent}
];

Answer 1

只需在声明它们时将它们设置为默认值即可。如果收到的值是真值，则覆盖默认值。如果第一个值是 false，我在赋值期间使用 || 运算符转到下一个值。考虑使用 ActivatedRouteSnapshot 而不是 ActivatedRoute 来获取参数。

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string | null = null;
  monetization = 'default monetization';
  sortBy = 'default sort by';
  page = 'default page';
  constructor(
    private getMovies: GetMoviesService,
    private snapshot: ActivatedRouteSnapshot
  ) {}
  ngOnInit(): void {
    this.genreId = this.snapshot.queryParams['genreId'] || this.genreId;
    this.monetization =
      this.snapshot.params['monetization'] || this.monetization;
    this.sortBy = this.snapshot.params['sortBy'] || this.sortBy;
    this.page = this.snapshot.params['page'] || this.page;

    if (this.genreId === null) {
      this.getMovies
        .moviesData(this.monetization, this.sortBy, this.page)
        .subscribe((movieData: MovieData) => {
          if (movieData !== undefined) {
            this.movies = movieData;
          }
        });
    }
  }
}

附带说明一下，如果您没有理由区分 null 和 undefined，只需使用 undefined 并检查该值是否为 falsey与 ! 或 true 与简单的 if 语句。确实有助于整理代码。

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string;
  ...
  ngOnInit(): void {
    this.genreId = this.snapshot.queryParams['genreId'];
    ...
    if (!this.genreId) {
      this.getMovies
        .moviesData(this.monetization, this.sortBy, this.page)
        .subscribe((movieData: MovieData) => {
          if (movieData) this.movies = movieData;
        });
    }
  }
}