Ленивая загрузка с Childroutes не работает

Question

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

Я пытаюсь реализовать отложенную загрузку в моем приложении Nativescript.

EDIT: добавлено этот небольшой обзор для облегчения понимания: введите описание изображения здесь

app-routing.module.ts:

const routes: Routes= [
    {path:'', redirectTo: 'auth', pathMatch: 'full'},
    {path:'auth', component: AnmeldungComponent},
    {path:'system', loadChildren: '~/app/system/system.module#SystemModule'},
    {path:'settings', component: SettingsComponent}
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule {}

system-routing.module.ts:

const routes: Routes = [
    {
        path: "",
        component: ListeSystemComponent,
    },
    { path: "monitorliste", component: ListeMonitorComponent },
    { path: "messwerte/:id", component: DatenMonitordatenComponent },
    {
        path:
            "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
        component: MesswertverlaufComponent,
    },
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule],
})
export class SystemRoutingModule {}

Я знаю, что уже использую .forChild(routes) Я думаю, что это не вызывает никаких проблем, или это так?

system.module.ts:

@NgModule({
    declarations: [
        ListeSystemComponent,
        ListeMonitorComponent,
        DatenMonitordatenComponent,
        MesswertverlaufComponent,
    ],
    imports: [
        NativeScriptRouterModule,
        SystemRoutingModule,
        NativeScriptCommonModule,
        SharedModule
    ],
    schemas: [NO_ERRORS_SCHEMA]
})
export class SystemModule {}

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

-> первый вопрос: имеет ли смысл загружать лениво мониторы (вот что в системе) или имеет смысл лениво загружать части после мониторов? Надеюсь, вы уловили мой вопрос ^^ '

если не использовать дочернюю маршрутизацию, у меня был такой код:

this.router.navigate(['/system/monitorliste'], { transition: {name: 'slideLeft'}});

теперь при использовании дочерней маршрутизации я пробовал это:

this.router.navigate(['/monitorliste'], { transition: {name: 'slideLeft'}, relativeTo: this.route});

но это не сработало как ожидалось ... РЕДАКТИРОВАТЬ: system-routing.module.ts:

const routes: Routes = [
    {
        path: "",
        component: ListeSystemComponent,
        children: [
            { path: "monitorliste", component: ListeMonitorComponent },
            { path: "messwerte/:id", component: DatenMonitordatenComponent },
            {
                path:
                    "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
                component: MesswertverlaufComponent,
            },
        ],
    },
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule],
})
export class SystemRoutingModule {}

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

Я думаю, что с вашей стороны будут еще вопросы, когда вы попытаетесь мне помочь, и я постараюсь ответить как можно быстрее.

Спасибо много вперед!

Answer 1

Использование LazyLoading зависит от структуры вашего проекта. Я думаю, что лучший способ - всегда иметь ленивый загружаемый модуль для каждого компонента. Итак, наилучшим образом вы должны прийти к этому решению (также с AuthGuard)

app-routing-module

const routes: Routes= [
  {path: '', redirectTo: 'system', pathMatch: 'full'},
  {path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule'},
  {path: 'system', loadChildren: './modules/system/system.module#SystemModule', canActivate: [AuthGuard]},
  {path: 'settings', loadChildren: './modules/settings/settings.module#SettingsModule', canActivate: [AuthGuard]},
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule {}

И тогда, например, в вашем модуле маршрутизации системы у вас должна быть одна основная система component и другие являются его дочерними элементами, например:

const routes: Routes = [

  {
    path: '',
    component: ListeSystemComponent,
    children: [
      {
        path: 'monitorliste',
        component: ListeMonitorComponent,
      },
      {
        path: 'messwerte/:id',
        component: DatenMonitordatenComponent,
      },
      {
        path: 'messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id',
        component: MesswertverlaufComponent,
      },
    ],
  },
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule],
})
export class SystemRoutingModule {}

В маршрутизации вы можете использовать canActiveate, например, с AuthGuard, который проверяет, находится ли пользователь в системе, и только тогда «системный» URL-адрес по умолчанию доступен как URL-адрес по умолчанию => ''.

Тогда вы можете сделать что-то похожее на System-> Monitor routing.

Пример AuthGuard:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from "../shared/auth.service";
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    public authService: AuthService,
    public router: Router
  ){ }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    console.log('AuthGuard check token: ', this.authService.token);

    if(this.authService.token != null){
      return true;
    }  
    else if(this.authService.isLoggedIn == true) {
      return true;
    }
    else {
      this.router.navigate(['/sign-in'])
    }
    return false;
  }

}

Реализуя охрану, вы не 'даже не нужно использовать router.navigate в ваших компонентах, потому что вы сделаете logi навигации c с охранниками и ленивой загрузкой.

Но если вам не нравится использовать охранники, вы возможность перемещаться по компонентам, как в этом случае

@Component({...})
class ListeSystemComponent{
  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit() {
   this.goDeeper()
  }

  goDeeper() {
    this.router.navigate(['/monitorliste'], { relativeTo: this.route });
  }
}