角度決議器注入路由器-有解無憂

我在我的 Angular (v13) 應用程式中定義了一個決議器來用 wordpress 后端做一些惡作劇。當用戶訪問 URL 時，我希望決議器檢查來自 wordpress 的帖子型別和 ID，并相應地進行路由（帖子串列、單個帖子、頁面等）。

為此，我在 WordpressResolver 類中注入了 Angular 的路由器，但是當我呼叫時router.navigate(...)，出現以下錯誤：

錯誤型別錯誤：無法讀取未定義的屬性（讀取“導航”）

路由器似乎沒有注入，但我不知道為什么。我在決議器上添加了 @Injectable 裝飾器，并在路由模塊中提供了它。
這是我的路由模塊和決議器代碼。

app.module.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotFoundComponent } from './modules/not-found/not-found.component';
import { WordpressResolver } from './wordpress-resolver';

const routes: Routes = [
  {
    path: 'posts',
    loadChildren: () =>
      import('./modules/posts/posts.module').then((m) => m.PostsModule),
  },
  {
    path: 'single/:id',
    loadChildren: () =>
      import('./modules/post/post.module').then((m) => m.PostModule),
  },
  {
    path: 'page/:id',
    loadChildren: () =>
      import('./modules/page/page.module').then((m) => m.PageModule),
  },
  {
    path: '**',
    component: NotFoundComponent,
    resolve: {
      error: WordpressResolver,
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [WordpressResolver],
})
export class AppRoutingModule {}

wordpress-resolver.ts

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  Resolve,
  Router,
  RouterStateSnapshot,
} from '@angular/router';
import { environment } from 'src/environments/environment';
import { UrlData } from './shared/model/url-data.interface';
import { UrlType } from './shared/model/url-type.enum';

@Injectable({ providedIn: 'root' })
export class WordpressResolver implements Resolve<HttpErrorResponse | null> {
  constructor(private http: HttpClient, private router: Router) {}

  private error: HttpErrorResponse | null = null;

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): HttpErrorResponse | null {
    this.http
      .get<UrlData>(environment.domain   state.url)
      .subscribe(this.resolveSuccess, this.resolveError);

    return this.error;
  }

  private resolveSuccess(urlData: UrlData): void {
    switch (urlData.type) {
      case UrlType.POSTS:
        this.router.navigate(['/posts'], { skipLocationChange: false });
        return;
      case UrlType.POST:
        this.router.navigate(['/post', urlData.id], {
          skipLocationChange: false,
        });
        return;
      case UrlType.PAGE:
        this.router.navigate(['/page', urlData.id], {
          skipLocationChange: false,
        });
        return;
      default:
        return;
    }
  }
  private resolveError(error: HttpErrorResponse): void {
    this.error = error;

    this.router.navigate(['/error'], {
      skipLocationChange: true,
    });
  }
}

（我知道 '/error' 尚未映射，這是一項正在進行的作業）

uj5u.com熱心網友回復：

您必須將回呼函式定義為箭頭函式，以便您可以訪問全域范圍

resolveSuccess= (urlData: UrlData): void => { }

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362678.html

標籤：有角的依赖注入角度路由角度解析器

上一篇：使用.net登錄/注冊

下一篇：如何從Laravel獲取資料并在Angular中顯示？