web-dev-qa-db-ja.com

routerLinkを介して名前付きアウトレットをターゲットにすると、余分な「/」が追加されます

ルーティング経由でアプリでモーダルを起動しようとしています。解決を妨げる余分なスラッシュがURLに追加されることを除いて、すべてが機能しているようです。 Urlは次のようになります（手動で入力しても機能します）...

/accounts(modal:accounts/1/edit)

しかし、代わりにこれを取得しています（ベースURLとアウトレットターゲットの間のスラッシュに注意してください）...

/accounts/(modal:accounts/1/edit)

ベースタグが設定されています...

<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <base href="/">
  ...
</head>

これが私のルーティング設定（accounts-routing.module.ts）です

const ACCOUNT_ROUTES: Routes = [
  {
    path: 'accounts',
    component: AccountsIndexComponent
  },{
    path: 'accounts/new',
    component: AccountsNewComponent
  },{
    path: 'accounts/:id',
    component: AccountsShowComponent
  },{
    path: 'accounts/:id/edit',
    component: AccountsEditComponent,
    outlet: 'modal'
  }
];

そしてアウトレット（app.component.html）

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

そしてリンク...

<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>

私は何が欠けていますか？プロジェクトは[email protected]を使用して作成され、[email protected]および[email protected]がインストールされます。

FWIW、ここにログのスクリーンショットがあります...

failed routing attempt

angularmodal-dialogangular2-routingrouteroutlet
13
Brian

修正は、リンクに空の相対パスを定義することでした。私を正しい方向に向けてくれた@unitarioに感謝します！

<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
28
Brian