Question

我有一个键值对。该对的值是一条路线。我正在使用名为路由器出口。我找不到正确的语法。任何帮助表示赞赏。

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

module.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'键值'％5D％7D％7D％5D'   错误：无法匹配任何路线。 URL段：'examples /％5B'/ examples'，％20％7Boutlets：％20％7B'definition'：％20％5B'key-value'％5D％7D％7D％5D'

'examples /％28definition：键值％29'

无法匹配任何路线。网址段：“示例/键值”

Answer 1

它无法读取您的对象，将您的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>

如何将可变路由与命名路由器出口一起使用？

1 个答案: