Angular 7 LazyLoading с детьми детей - PullRequest
Новая
       37

Angular 7 LazyLoading с детьми детей

2 голосов
/ 17 июня 2019

Я могу изо всех сил пытаться сформулировать проблему, но у меня есть StackBlitz, чтобы помочь.

https://stackblitz.com/edit/angular-brhyir

Обратите внимание на ленивую загрузку "пользователей" ...

app.routes.ts 

//import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { SecureComponent } from './layouts/secure.component';
import { HelloComponent } from './hello.component';

//SECURE
export const SECURE_ROUTES: Routes = [
{ path: '',
  component: HelloComponent,
  data: {
  }
},

//Lazyloading
{ path: 'users',
  data: {
  breadcrumb: 'Users',
},
loadChildren: './users/user.module#UserModule' }
];

export const routes: Routes = [
 { path: '', component: SecureComponent, data: { title: 'Secure Views' }, 
 children: SECURE_ROUTES },

];

это работает, но ...

user.routes. ц 

import { Routes } from '@angular/router';
import { UsersComponent } from './users.component';
import { UserComponent } from './user/user.component';
import { UserTwoComponent } from './user/user-two.component';

export const UserRoutes: Routes = [

  { path: '',
  component: UsersComponent,
  children: [
    {
      path: 'user',
      component: UserComponent,
      data: {
        breadcrumb: 'New'
      },
      children: [
        {
          path: 'user2',
          component: UserTwoComponent,
          data: {
            breadcrumb: 'New2'
          }
        }
      ]
    }
   ]
  }
];

Так что, если вы нажмете кнопки, вы увидите проблему. То есть, маршрут правильный (пользователи / пользователи), НО он НЕ загружает 'UserComponent', вместо этого он все еще показывает 'User s Component'. Почему я не знаю?

Ответы [ 2 ]

2 голосов
/ 17 июня 2019

Существует три проблемы:

  1. В users.component.ts вам необходимо внести небольшую модификацию 

    toUser() {
   this.router.navigate(['user'], {relativeTo: this.route});
}

    Это необходимо для указания угловогонаправить вас к определенному пути, который относительно к текущему пути, на котором вы находитесь.

  2. То же самое в user.component.ts, 

    toUserTwo() {
   this.router.navigate(['user2'], {relativeTo: this.route});   
}

    Чтобы обе эти точки работали, вам нужно ввести ActivatedRoute в соответствующие конструкторы.Вам необходимо импортировать его из @angular/router

  3. Далее необходимо добавить следующее в user.component.html, а также users.component.html

    * 1024.*

    Это необходимо для визуализации дочерних маршрутов в родительском шаблоне.

Вот stackblitz , если вам нужно увидеть рабочий пример этого.

2 голосов
/ 17 июня 2019

Вы должны иметь <router-outlet></router-outlet> в шаблоне любых целевых компонентов, которые будут отображать дочерние маршруты.

И UsersComponent, и UserComponent не имеют <router-outlet> для отображения других маршрутов.

...