Динамическое использование вложенных маршрутизаторов в Angular 4 - PullRequest
Новая
       19

Динамическое использование вложенных маршрутизаторов в Angular 4

0 голосов
/ 17 мая 2018

Использование динамического Nested router-outlet в Angular 4

У меня был простой Angular CLI с динамической маршрутизацией с Angular.

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

онлайн Пример

Конфигурации маршрутизатора 

    import { Routes } from '@angular/router';

import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';

export const rootRouterConfig: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'home/homenest', component: HomeNestComponent },

];

1 Ответ

0 голосов
/ 17 мая 2018

Выполните следующие изменения в конфигурациях маршрутизатора. 

  import { Routes } from '@angular/router';
     import { AboutComponent } from './about/about.component';
    import { HomeComponent } from './home/home.component';
    import { HomeNestComponent } from './home/homenest/homenest.component';

    export const rootRouterConfig: Routes = [
      { path: 'home', component: HomeComponent, 
        children:[{ path: 'homenest', component: HomeNestComponent }]
      },
      { path: 'about', component: AboutComponent },
      { path: 'homenest', component: HomeNestComponent },

    ];

Изменения в home.component.ts. 

public homeNestClick(e) {
          this.router.navigateByUrl('/home/homenest');
      }

https://stackblitz.com/edit/angular-tf7ru3?file=src/app/home/home.component.ts

...