在Angular中,我如何直接导航到延迟加载模块中的路径？

Question

我想有两个顶级路径用于登录和注册.

我宁愿没有做auth/log-in和auth/register.

但是,auth组件位于一个单独的模块中,这很好,因为除非特别要求,否则不应加载它.

export const routes: Route[] = [
  { path: 'log-in',   loadChildren: './auth-module/auth.module#AuthModule'},
  { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];

我如何指定何时定义我希望log-in路径转到延迟加载的AuthModule 内部路径的log-in路径,以及转到延迟加载模块内部路径的路径？registerregister

Answer 1

到目前为止,您无法在帖子中按照自己的意愿配置路由.如果为路由器启用了日志记录,则可以看到.您的模块(登录,注册)的路径将被消耗,并且在您刚刚''离开的模块路由中,这些路径无法与两个不同的组件匹配.

你可以做到这一点,即使它不是那么漂亮,我不知道它是如何/如果它在旧版浏览器中工作.

在你的 app.module.ts

const APP_ROUTES: Routes = [
    { path: 'login', redirectTo: 'auth/login', pathMatch: 'full' },
    { path: 'register', redirectTo: 'auth/register', pathMatch: 'full' },
    { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule', pathMatch: 'prefix'},
];

@NgModule( {
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule,
        RouterModule.forRoot(APP_ROUTES)
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

而auth.module.ts这个样子的

const ROUTES: Routes = [
    { path: 'login', component: LoginComponent, pathMatch: 'full' },
    { path: 'register', component: RegisterComponent, pathMatch: 'full' }
];

@NgModule( {
    imports: [
        CommonModule,
        RouterModule.forChild( ROUTES )
    ],
    declarations: [
        LoginComponent,
        RegisterComponent
    ]   
} )
export class AuthModule { }

然后,您可以访问路线<a routerLink="login">Login</a>,也可以使用router.navigate.不幸的是,即使客户只是打电话,这也会让你auth/login或者auth/register在你的浏览器网址中/login.

您可以通过在您的window.history- 中创建一个条目来解决这个问题- 因为我说不是很漂亮,而且必须在组件构造函数中完成. window.history.pushState('register', 'Register', 'register');或者window.history.pushState('login', 'Login', 'login');在组件中将使用/login和留下您的浏览器URL /register.

最好的方法是使用这个功能扩展角度路由器并将其用作自定义路由器,但是你必须真正进入它并且下一次更新你可能会被搞砸.

也许这有助于你

最好的祝福

Answer 2

export const routes: Route[] = [
  { path: 'log-in',   loadChildren: './auth-module/auth.module#AuthModule'},
  { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];

我将尝试说这是不可能的。Lazy loading重定向加载的模块。这意味着：

• 开始导航log-in。
• 延迟加载模块开始加载
• 成功加载后，网址将为 somePath/log-in

• 那么，下一步是什么？重定向过程开始。因此，每个延迟加载模块的routing.ts应该包含如下入口点路径：

  {
     path: '',
     redirectTo: 'somePath/ChildPath' // or component: SomeComponent
  }
  

它导航到哪个路由都没有关系，如果它是一个惰性模块，那么它将尝试查找入口路径。在您的情况下，两条路由加载相同的模块，但它们都引用相同的入口路由path (path: '')。

如果您确实要划分它们，则应将它们分配在不同的模块中。

export const routes: Route[] = [
  { path: 'log-in',   loadChildren: './auth-module/someModule#someModule'},
  { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];

some-module.routing.ts：

{
    path: '',
    component: LoginComponent,

},

更新29.04.18。具有一个组件的简单解决方案

解决方案是创建其他组件，以根据当前组件充当其他组件的渲染器url。

app-routing.module：

const appRoutes: Routes = [
 ...

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',

  },
  {
    path: 'login',
    loadChildren: 'app/admin/admin.module#AdminModule',

  },
  {
    path: 'crisis-center',
    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
    // data: { preload: true }
  },
  { path: '', redirectTo: '/superheroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

在admin.module创建渲染器组件中

central.component.ts：

...

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

  currentComponent: LoginComponent | AdminComponent;

  constructor(public router: Router, public activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    if (this.router.url === '/login') {
      this.currentComponent = LoginComponent;
    } else {
      this.currentComponent = AdminComponent;
    }
  }
}

central.component.template：

<ng-container *ngComponentOutlet="currentComponent"></ng-container>

因此，如您所见，中央组件将根据URL路径动态呈现组件。

对于渲染，使用带有NgComponentOutlet的声明性方法

有关命令式和声明式方法的更多详细信息：https : //stackoverflow.com/a/49840700/5677886

StackBlitz演示