Question

我有一个可能非常简单的问题，但是我无法弄清楚我犯了什么错误。

我尝试在我的Nativescript应用中实现延迟加载。

编辑：添加了此小概述以方便理解：

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）

应用程序路由模块

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 {}

然后，例如在您的系统路由模块中，您应该有一个主要的系统组件，而其他则是他的孩子，例如：

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一起使用，例如AuthGuard，它检查用户是否已登录，然后才可以将默认的“系统” URL作为默认url =>''访问。

然后，您可以进行类似于System-> Monitor路由的事情。

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，因为您将通过警卫和延迟加载来创建导航逻辑。

但是，如果您不喜欢使用防护罩，则可以在这种情况下导航组件

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

  ngOnInit() {
   this.goDeeper()
  }

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

子路径的延迟加载无法正常运行

1 个答案: