无法在 routerLink 中导航传递参数答案

【问题标题】：Can't navigate passing parameters in routerLink无法在 routerLink 中导航传递参数
【发布时间】：2018-07-10 12:09:18
【问题描述】：

我遇到了一个奇怪的问题：使用 routerLink 我可以在任何地方导航，但是如果我向当前路由添加另一个路由参数，它就不起作用了。

这是我的 navigator.component。我使用以下代码将 URL 传递给我的 app-card 组件。

<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>

这就是我在 app-card 组件中使用该 url 的地方：

<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）都会正常运行... 我认为可能导致这种行为的一些因素：

InstallationNavigatorComponent 和 MapNavigatorComponent 都扩展了另一个基础组件（NavigatorComponent）；
仪表板模块是延迟加载的；

有什么线索吗？

注意：到达 NavigatorResolver，但地址栏中的 URL 和显示的组件模板保持不变。

【问题讨论】：

标签： angular typescript angular6

【解决方案1】：

构建路径参数数组并将其传递给 routerLink 指令。例如：modelUrl: Array<string> = ['dashboard', 'map', 'projectId', 'installationId'] 并将其分配给 routerLink<mat-card class="card-component" [routerLink]="modelUrl">...</mat-card> 其中 modelUrl 是路径参数数组。

注意：我在延迟加载模块时遇到了类似的问题，当我将数组传递给 routerLink 指令时它工作了。

【讨论】：

不，即使传递了一个参数数组，问题仍然存在...... :(

【解决方案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;

【讨论】：

尝试在仪表板路由模块中重新排序路由。第一个应该是 'map'，然后是 'map/:projectId'，最后是 'map/:projectId/:installationId' [{ path: 'map', ... }, { path: 'map/:projectId ', ... }, { path: 'map/:projectId/:installationId', ... }]
已经尝试过了。奇怪的是，从 'map' 传递到 'map/:projectId' 有效；仅当从 'map/:projectId' 传递到 'map/:projectId/:installationId' 或从 'map/:projectId/ :installationId' 到 'map/:projectId/:installationId/:mapId'
尝试使用子路由：[{ 'map', children: [ path: ':projectId', children: [{ path: ''}, { path: ':installationId' }]] ]
路线的顺序很重要。我认为你会用儿童路线解决这个问题。你可以在这里阅读更多关于嵌套路由的信息codecraft.tv/courses/angular/routing/nested-routes
你的问题可能和这个一样：stackoverflow.com/questions/45842934/…

【解决方案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();
});

【讨论】：