無法瀏覽routerLink中的傳遞參數

Question

我遇到了一個奇怪的問題：使用routerLink，我可以在任何地方導航，但是如果我向當前路由添加另一個路由參數，它將無法正常工作。

這是我的navigator.component。 我使用以下代碼將URL傳遞給我的應用卡組件。

<div class="installations-grid" *ngIf="installations != null">
  <div class="no-cards" *ngIf="installations.length == 0"><p i18n="no_installations| no installations string">Nessuna installazione per questo progetto</p></div>
  <div class="box-cards" *ngFor="let installation of installations">
  <app-card [title]="installation.name" [image-url]="installation.url" [content-text]="installation.id" [url]="'/dashboard/map/' + project.id + '/' + installation.id"></app-card>
</div>  

這是我在應用卡組件中使用該網址的位置：

<mat-card class="card-component" [routerLink]='model.url'>...</mat-card>

我將導航至/ dashboard / map / 1/2 / 。 該路由與另一個組件關聯。 這些是我的儀表板模塊路線：

[{
    path: 'map/:projectId/:installationId',
    component: MapNavigatorComponent,
    canActivate:[AuthGuardService],
    resolve: {
        maps: NavigatorResolver
    },
    data: {
        searchBar: {
            enabled: true,
            autocomplete: true,
            searchType: 'vin'
          },
          permission: {
            only: [''], // TODO: mettere il permesso vero
            redirectTo: 'login'
          }
    }
},
{
    path: 'map/:projectId',
    component: InstallationNavigatorComponent,
    canActivate:[AuthGuardService],
    resolve: {
        installations: NavigatorResolver
    },
    data: {
        searchBar: {
            enabled: true,
            autocomplete: true,
            searchType: 'vin'
          },
          permission: {
            only: [''], // TODO: mettere il permesso vero
            redirectTo: 'login'
          }
    }
},
{
    path: 'map',
    component: ProjectsNavigatorComponent,
    canActivate:[AuthGuardService],
    resolve: {
        projects: NavigatorResolver
    },
    data: {
        searchBar: {
            enabled: true,
            autocomplete: true,
            searchType: 'vin'
          },
          permission: {
            only: [''], // TODO: mettere il permesso vero
            redirectTo: 'login'
          }
    }
}];

任何其他路由（例如/ login ）都可以正常運行...我認為可能導致此行為的一些因素：

1. InstallationNavigatorComponent和MapNavigatorComponent都擴展了另一個基本組件（NavigatorComponent）；
2. 儀表板模塊是延遲加載的；

有什么線索嗎？

注意 ：它到達NavigatorResolver，但地址欄中的URL和所示的組件模板保持不變。

Answer 1

構建路徑參數數組，並將其傳遞給routerLink指令。 例如： modelUrl: Array<string> = ['dashboard', 'map', 'projectId', 'installationId']並將其分配給routerLink <mat-card class="card-component" [routerLink]="modelUrl">...</mat-card> ，其中modelUrl是路徑參數數組。

注意：我在lazyloaded模塊中遇到了類似的問題，當我將數組傳遞給routerLink指令時，它可以工作。

Answer 2

當您使用RouterLink指令作為輸入（帶有方括號[[routerLink] =“ arg”）時，它期望將字符串數組作為參數。

<mat-card class="card-component" [routerLink]="['dashboard', 'map', project.id, installation.id]">...</mat-card>

如果是這種情況，則應這樣使用：

<mat-card class="card-component" routerLink="{{ model.url }}">...<mat-card>

其中model.url是：

model.url = '/dashboard/map/' + project.id + '/' + installation.id;

Answer 3

解決了！ 我的NavigatorResolver類中存在一個錯誤。

在這里，我正在調用此函數：

getInstallations(projectID: string, ignoreCache = false): Observable<any> {
    if (!ignoreCache && this.cache[projectID] != null) {
        this.logger.debug("cache hit", this.cache[projectID]);

        return Observable.create(observer => {
            observer.next(this.cache[projectID]);
            observer.complete();
        });
    }
    else {
        let apiURL = `${Services.GET_INSTALLATIONS}/?project__id=${projectID}`;
        return this.apiService.get(apiURL).pipe(map(json => {
            let installations = json['objects'];
            this.cache[projectID] = installations;
            return installations;
        }));
    }
}

我所缺少的是observer.complete（）;。

另一種選擇是使用：

return of(this.cache[projectID]);

代替：

return Observable.create(observer => {
    observer.next(this.cache[projectID]);
    observer.complete();
});