проблемы угловой маршрутизации с дочерними маршрутами - PullRequest
Новая
       7

проблемы угловой маршрутизации с дочерними маршрутами

0 голосов
/ 12 февраля 2019

У меня проблемы с написанием родительского компонента с дочерними компонентами.Когда я направляю к потомкам, кажется, что он также воссоздает родителя, что приводит к удвоению html.

Вы можете увидеть это в примере со стеком, который я создал здесь .

В корне моего приложения у меня есть компонент конфигурации: 

@Component({
  selector: 'app-configuration',
  template: ` <app-sidebar></app-sidebar>
             <router-outlet></router-outlet>`
   })

Затем он содержит компонент боковой панели, в котором есть мой список ссылок, по которым я хочу перейти. 

@Component({
  selector: 'app-sidebar',
  template: `<div id="menu">
            <ul *ngFor="let gateway of gateways$ | async">
                <li><a routerLink="configure/{{gateway.toLowerCase()}}"> 
 {{gateway}}</a></li>
            </ul>
          </div>`
   })

export class SidebarComponent implements OnInit {

  gateways$:Observable<string[]>;
  constructor() { }
   ngOnInit() {
    this.gateways$ = this.getGateways()
   }
   getGateways():Observable<string[]>{
    let gateways=["CDS","MCP","CNS"]
    return of(gateways);       
}

Кажется, причина проблемы в том, как я определил свои маршруты: 

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

Может кто-нибудь сказать мне, возможно ли сделать то, что я пытаюсь сделать, так, как яя делаю это?Я надеялся разместить дочерние компоненты в компоненте конфигурации, чтобы потом можно было добавить дочерние компоненты в конфигурацию, чтобы я мог заниматься другими делами.

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019

Три вопроса:

  1. В шаблоне app.component.ts должно быть <router-outlet></router-outlet>, а НЕ <app-configuration></app-configuration>

  2. В sidebar.component.tsшаблон должен иметь <li><a routerLink="/configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li> и НЕ <li><a routerLink="configure/{{gateway.toLowerCase()}}">{{gateway}}</a></li>

/ отсутствует в routerLink

Измените конфигурацию вашего маршрута на: 
  const routes: Routes = [
  {
    path: 'configure', component: ConfigurationComponent,
    children: [
      { path: 'cds', component: CdsComponent },
      { path: 'mcp', component: McpComponent },
      { path: 'cns', component: CnsComponent },
    ]
  },
  {
    path: '**', redirectTo: '/configure', pathMatch: 'full'
  }
];

Вот Рабочий образец StackBlitz для вашей ссылки.

0 голосов
/ 12 февраля 2019

Вы смешиваете компоненты и маршрутизацию.

В app.component.ts вы всегда показываете ConfigurationComponent, поэтому он отображается один раз.

Затем вы продолжаете и маршрутизируете его, так что выотобразите его во второй раз.

Вместо этого в app.component.ts шаблон должен просто иметь значение <router-outlet></router-outlet>, чтобы запустить настроенный маршрутизатор.

Затем в вашем configuration.component.ts, вы можете использовать template: `.

Кстати, ваш ngFor* размещен неправильно, он должен быть: 

<ul>
  <li *ngFor="let gateway of gateways$ | async"><a [routerLink]="['configure', gateway.toLowerCase()]">{{gateway}}</a></li>
</ul>
0 голосов
/ 12 февраля 2019

Попробуйте добавить перенаправленный маршрут по умолчанию к вашим дочерним маршрутам. 

const routes: Routes = [
  {
    path:'configure',component: ConfigurationComponent, 
    children:[
        {path: '', redirectTo: 'cds', pathMatch: 'full'},
        {path:'cds', component: CdsComponent},
        {path:'mcp', component:McpComponent},
        {path:'cns', component:CnsComponent},
    ]
  }

Хорошо иметь путь по умолчанию в этих сценариях

Если это не работает, приведите пример полного кода (свесь модуль маршрутизации, а не только маршруты)

...