Роутеры не загружаются - PullRequest
Новая
       13

Роутеры не загружаются

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

В настоящее время я создаю панель мониторинга с фиксированным меню, но содержимое динамическое.

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

Итак: приборная панель / home должна получить панель управления домашнего компонента приборной панели / ссылки должны загрузить компонент связи приборной панели и т. Д.

Это мой маршрутизатор: 

const routes: Routes = [
  { path: '', component: HomepageComponent },
  { path: 'link/:trackId', component: LinkComponent },
  { path: 'dashboard', component: DashboardComponent, 
    children: [
      { path: '', component: DashboardContentHomeComponent, outlet:   'dashboardcontent'},
      { path: 'links', component: DashboardContentLinksComponent, outlet:   'dashboardcontent'}
    ]
  },  
  { path: '*', redirectTo: ''},
];

СейчасМой компонент Dashboard выглядит следующим образом: 

<div class="dashboard-holder">
  <app-login *ngIf="!authService.afAuth.auth.currentUser"></app-login>
  <app-dashboard-menu *ngIf="authService.afAuth.user | async" class="dashboard-menu"></app-dashboard-menu>
  <app-dashboard-content *ngIf="authService.afAuth.user | async" class="dashboard-content"></app-dashboard-content>
</div>

А компонент Dashboard-content выглядит следующим образом: 

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

Теперь к проблеме: При переходе к «URL» / панели управления DashboardContentHomeComponentзагружается правильно!

HomeComponent Working

Но при переходе по "URL" / панели инструментов / ссылкам я получаю следующую ошибку:

LinkComponentError

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

У кого-нибудь есть идеи, как это исправить?

1 Ответ

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

Я бы порекомендовал такую ​​структуру: 

dashboard <-- have a guard against unauthed users
  links
login <-- have the guard redirect to login

Начните с добавления router-outlet в шаблон AppComponent.

Затем измените шаблон в DashboardModule на:

<app-dashboard-menu class="dashboard-menu"></app-dashboard-menu>

<div class="dashboard-holder">
  <router-outlet></router-outlet>
</div

Тогда у меня будет конфигурация маршрута root (AppRoutingModule), например: 

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
  { path: 'dashboard': loadChildren: './routes/dashboard/dashboard.module#DashboardModule'},
  { path: 'login': loadChildren: './routes/login/login.module#LoginModule'},
  { path: '**', redirectTo: 'dashboard'}
];

Тогда для каждой функции, которую вы хотите в панели мониторинга, вы будетесоздайте функциональные модули и сделайте их потомками DashboardModule: 

const routes: Routes = [
  { path: '', component: DashboardComponent, 
    children: [
      { path: 'links', loadChildren: './routes/links.module#LinksModule'},
    ]
  }
];

. Как вы можете видеть, это значительно повышает простоту и масштабируемость вашего приложения и устраняет необходимость в именованных выходах.Облегчить навигацию в вашем приложении.Надеюсь, это поможет.

...