时间戳

首页 > 解决方案 > 如何使用带有命名路由器出口的可变路由？

angular - 如何使用带有命名路由器出口的可变路由？

问题描述

我有一个键值对。该对的值是一条路线。我正在使用一个命名的 router-outlet。我找不到正确的语法。任何帮助表示赞赏。

.ts：

public myPair: { [key: string]: string } =
{
  'Keyvalue': 'MyRoutHere'
};

.html：

<div *ngFor="let item of myPair | keyvalue">
    <button mat-raised-button type="submit" color="accent" [routerLink]="item.value">{{item.key}}</button>
</div>

<router-outlet name="namedRoute"></router-outlet>

模块.routes.ts

const routes: Routes = [{
    path: 'example', component: ExampleMainComponent, children: [
        { path: 'key-value', component: KeyValueComponent, outlet: 'namedRoute' }
    ]
}];

我尝试过的事情：

'Keyvalue': '[\'/examples\', {outlets: {\'definition\': [\'key-value\']}}]'
'Keyvalue': '(definition:key-value)'
'Keyvalue': '\\key-value'

我得到的错误：

URL 段：'examples/%5B'/examples',%20%7Boutlets:%20%7B'definition':%20%5B'key-value'%5D%7D%7D%5D' 错误：无法匹配任何路由. URL 段: 'examples/%5B'/examples',%20%7Boutlets:%20%7B'definition':%20%5B'key-value'%5D%7D%7D%5D'

'例子/%28定义：键值%29'

无法匹配任何路由。URL 段：“示例/键值”

标签： angularangular2-routingrouterlink

解决方案

它未能读取您的对象，将您的 ts 和 html 更改为：

  public myPair: { [key: string]: string } =
  {
    Keyvalue: 'MyRoutHere'
  };

HTML：

    <div *ngFor="let item of myPair | keyvalue">
    <button mat-raised-button type="submit" color="accent" [routerLink]="item.value">{{item.key}}</button>
    </div>

    <router-outlet name="namedRoute"></router-outlet>

推荐阅读