0

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

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

编辑：添加了这个小概述以便于理解： 在此处输入图像描述

应用程序路由.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 {}

系统路由.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，要么我在选择系统时卡住了。

我想在您尝试帮助我时，您方面会有更多问题，我会尽快回答。

提前非常感谢！

4

1 回答 1

0

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 一起使用，它检查用户是否已登录，只有这样才能将默认的“系统”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，因为您将使用守卫和延迟加载来制作导航逻辑。

但是如果你不喜欢使用守卫，你可以像这种情况一样在组件中导航

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

  ngOnInit() {
   this.goDeeper()
  }

  goDeeper() {
    this.router.navigate(['/monitorliste'], { relativeTo: this.route });
  }
}
于 2020-06-19T15:25:29.377 回答