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'
          }
    }
}];

其他任何路由（例如 /登录）都可以正常运行... 我认为可能是造成此行为的一些因素：

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

有任何线索吗？

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

Answer 1

构建路径参数数组，并将其传递给routerLink指令。例如：{{1} 并将其分配给routerLink modelUrl: Array<string> = ['dashboard', 'map', 'projectId', 'installationId']，其中modelUrl是路径参数数组。

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

Answer 2

当您使用RouterLink指令作为输入（带有方括号，[routerLink] =“ arg”）时，它期望将字符串数组作为参数。

private fun launchPackage(context: Context, packageName : String) {
    val metrics = getRealDisplayMetrics(context)
    val options = ActivityOptions.makeBasic()
    options.launchBounds = leftSide(metrics)

    val launchIntent = context.packageManager.getLaunchIntentForPackage(packageName)

    context.startActivity(launchIntent, options.toBundle())
}

private fun leftSide(metrics: DisplayMetrics) : Rect {
    val left = 0
    val top = 0
    val right = metrics.widthPixels / 2
    val bottom = metrics.heightPixels

    return Rect(left, top, right, bottom)
}

private fun getRealDisplayMetrics(context: Context): DisplayMetrics {
    val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
    val defaultDisplay = windowManager.defaultDisplay
    val metrics = DisplayMetrics()

    defaultDisplay.getMetrics(metrics)

    return metrics
}

如果您的情况是这样，应该使用它：

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

其中 model.url 是：

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

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();
});

无法浏览routerLink中的传递参数

3 个答案: