我在為組件 ts 類中的路由引數分配默認值時遇到問題。我希望genreId 默認為空。我希望 monetization、sortBy 和 page 具有默認值。我不確定我是否應該在 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}
];
uj5u.com熱心網友回復：
只需在宣告它們時將它們設定為默認值。如果接收到的值是真實的，則覆寫默認值。如果第一個值是假的，我在賦值期間使用||運算子轉到下一個值。考慮使用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只需使用簡單的 if 陳述句undefined檢查值是假的還是真值。!確實有助于整理代碼。
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;
});
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/443633.html