1

请在此处参考我的项目结构我已经创建了一个包含多个延迟加载的嵌套模块的项目。

  1. 在应用程序启动时加载 AppModule
  2. 当用户点击登录按钮 LoginModule 被加载
  3. 如果用户存在，即登录成功，AppModule 的另一个功能模块IntegratedPmntsModule 应该从login-routing.module.ts 延迟加载。它使用 'button routerLink='integratePayments' class="pmntButton"' 完美加载 IntegratedPmntsModule ，但这不是我想要的。

我的要求是有条件地加载功能子模块，如组件 login.component.ts 所示，当用户登录失败时，他应该导航到登录（它工作正常，因为 LoginModule 已经延迟加载）并且登录成功时用户应该导航到 IntegratedPmntsModule 中存在的 IntegratedPaymentsComponent（这不会发生）。

  1. this.router.navigate(['integratedPayments']); - 正在给出“未捕获（承诺）：错误：无法匹配任何路线“integratedPayments”

  2. 我什至尝试使用 NgModuleFactoryLoader.load() 的 load() 方法加载 IntegratedPmntsModule，该方法给出“未找到模块错误”

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginFormGroup: FormGroup;
  customerModel:CustomerLoginModel = new CustomerLoginModel();
  userExist: Boolean = true;

  constructor(private loginService: LoginService, private router: Router, private readonly loader: NgModuleFactoryLoader) { }

  ngOnInit(): void {
    this.loginFormGroup = new FormGroup({
      customerId: new FormControl('', [Validators.required,Validators.maxLength(20),Validators.pattern('^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*$')]),
      password: new FormControl('', [Validators.required, Validators.maxLength(15)])
    })
  }
  submitLoginForm(formGroup: FormGroup): any{
   
   this.customerModel.setCustomerId(formGroup.value.customerId);
   this.customerModel.setPassword(formGroup.value.password);
   this.loginService.authenticateCustomer(this.customerModel).subscribe(
     response=>{
       this.userExist=response},
      error=>{
        console.log(error)
      }
    );
      if(this.userExist){
          //this.loader.load('./app/integrate-pmnts-module/integrate-pmnts.module#IntegratePmntsModule').
          //then(factory =>this.router.navigate(['integratedPayments']));
          this.router.navigate(['integratedPayments']);
      }
      else
        this.router.navigate(['login']);
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginauthGuard } from './login/loginauth.guard';


const routes: Routes = [
 
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(mdule=>mdule.LoginModule),
  },
  
];

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

login-routing.module.ts


const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    //canDeactivate: [LoginauthGuard]
  },
  {
    path: 'integratedPayments',
    loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

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

}

login.component.html


<html>
    <form [formGroup]="loginFormGroup" (ngSubmit)="submitLoginForm(loginFormGroup)"> 
            Customer Id:<input type="text" formControlName="customerId" placeholder="Enter Customer ID"><br><br>
            Password: <input type="password" formControlName="password" placeholder="Enter Password"><br><br>
            <div *ngIf='!userExist'>
                Please enter valid credentials!
            </div><br><br>
        <button class="pmntButton">Login</button>
    </form>
</html>

integratepayments-routing.module.ts


const routes: Routes = [
    {
        path: '',
        component: IntegratedPaymentsComponent
    },
    {
      path: 'eftPaymentsPage',
      loadChildren: () => import('src/app/integrate-pmnts-module/eft-payments-module/eft-payments-module').then(mod=>mod.EftPaymentsModuleModule)
    }
];

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

4

1 回答 1

0

由于integratedPayments路线是路线的孩子，login您应该使用：this.router.navigateByUrl('login/integratedPayments')。

但这可能仍然不起作用，因为来自的路由login-routing.module.ts定义如下：

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    //canDeactivate: [LoginauthGuard]
  },
  {
    path: 'integratedPayments',
    loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

这意味着第一个路由 ( path: '') 将始终匹配。为了避免这种情况，您可以做的是添加pathMatch: 'full'选项：

const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    pathMatch: 'full'
  },
  {
    path: 'integratedPayments',
    loadChildren: () => import('../integrate-pmnts-module/integrate-pmnts.module').then(mdule=>mdule.IntegratePmntsModule)
  }
];

完美搭配 'button routerLink='integratePayments' class="pmntButton"'

这是因为RouterLink指令在内部是如何工作的。

让我们看看当您单击具有此指令的按钮时会发生什么：

@HostListener('click')
  onClick(): boolean {
    const extras = {
      skipLocationChange: attrBoolValue(this.skipLocationChange),
      replaceUrl: attrBoolValue(this.replaceUrl),
      state: this.state,
    };
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

  get urlTree(): UrlTree {
    return this.router.createUrlTree(this.commands, {
      relativeTo: this.route, // !
      queryParams: this.queryParams,
      fragment: this.fragment,
      preserveQueryParams: attrBoolValue(this.preserve),
      queryParamsHandling: this.queryParamsHandling,
      preserveFragment: attrBoolValue(this.preserveFragment),
    });
  }

如您所见，它正在使用relativeTo选项。this.route被注入为private route: ActivatedRoute。

这意味着您可以this.router.navigate(['integratedPayments']);从登录组件中使用它。

您必须首先注入ActivatedRoute内部登录组件，然后将relativeTo选项添加到route.navigate：

this.router.navigate(['integratedPayments'], { relativeTo: this.route });
于 2020-08-14T08:25:23.377 回答