web-dev-qa-db-ja.com

Angular 6-複数のルーターアウトレット

Enter-compが欲しいです。概要として、基本的には2つのchild-comp。たとえば、login-compとregister-comp。さらに、複数のルーターアウトレットでこれを管理したいと思います。しかし、「もちろん」まだ動作しません。投げ続けます：Error: Cannot match any routes. URL Segment: ',%20%7Boutlets:%20%7Blogin:%20%5B'login'%5D%7D%7D'

アプリのルーティング設定

const routes: Routes = [
  {path: 'stories', component: StoriesComponent},
  {path: '', component: EnterOverviewComponent, children: [
      {path: 'login', component: LoginComponent, outlet: 'login'},
      {path: 'register', component: RegisterComponent, outlet: 'register'},
    ]}
];

アプリルート

<app-navbar></app-navbar>

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>

Navbar comp。

ここでエラーを予期しています。私は疑わしい、私は偽のルートを呼び出すと：

<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {login: ['login']}}">Sign In</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {register: ['register']}}">Register</a>
  </li>
</ul>
angularroutingangular2-routingrouter-outlet
5
MarcoLe

問題は、Auxilliaryルートを文字列として送信しようとしていることです。 routerLinkは、RHSの値を文字列として評価します。そのため、ルートに奇妙なキャラクターが表示されます。これを機能させるには、次のように試す必要があります-

<a [routerLink]="[{ outlets: { example: ['example1'] } }]">Example</a>

あなたの場合

 <a [routerLink]="[{ outlets: { register: ['register'] } }]">Example</a>//outletName:['route-path']

[〜＃〜]編集済み[〜＃〜]

ROOTルートに関連する名前の付いた子アウトレットは機能せず、 [〜＃〜] bug [〜＃〜] のように見えます

回避策は commentsセクション に記載されています。

[〜＃〜]または[〜＃〜]

以下のように設定を変更できます-

{
    path: '', component: LoginComponent
 },
 {
    path: 'example1', component: ExampleComponent, outlet: 'example'
 }
4
Avij

以下の例を参照してください

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

@Component({
selector: 'my-app',
template: 
`<a routerLink='A'>A</a>
<a routerLink='B'>B</a>
<br>
<a [routerLink]='[{ outlets: { secondRouter: ["C"] } }]'>C</a>
<a [routerLink]='[{ outlets: { secondRouter: ["D"] } }]'>D</a>

<router-outlet></router-outlet>
<router-outlet name='secondRouter'></router-outlet>`,
})
export class AppComponent  {}

/***** fitst router */
@Component({
selector: 'app-a',
template: '<h1>A</h1>',
})
export class AComponent  {}

@Component({
selector: 'app-b',
template: '<h1>B</h1>',
})
export class BComponent  {}

 /****** second router */

@Component({
selector: 'app-c',
template: '<h1>C</h1>',
})
export class CComponent  {}

@Component({
selector: 'app-d',
template: '<h1>D</h1>',
})
export class DComponent  {}

const routes: Routes = [
 { path: 'A', component: AComponent },
 { path: 'B', component: BComponent },
 { path: 'C', component: CComponent, outlet: 'secondRouter' },
 { path: 'D', component: DComponent, outlet: 'secondRouter' }
 ];

 @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
0
murthy naika k