Question

我希望有两个顶级路径用于登录和注册。

我不想做ds.Table[1]和auth/log-in。

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

auth/register

如何指定我定义路线的时间，我希望export const routes: Route[] = [ { path: 'log-in', loadChildren: './auth-module/auth.module#AuthModule'}, { path: 'register', loadChildren: './auth-module/auth.module#AuthModule'} ];路径转到延迟加载的AuthModule中的log-in路径，以及{{ 1}}路径转到延迟加载模块的<{1}}路径里面？

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和/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: '')。

如果你真的想要划分它们，它们应该分配在不同的模块中。

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

<强>一些-module.routing.ts：

{
    path: '',
    component: LoginComponent,

},

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

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

应用-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>

因此，正如您所看到的，中心组件将动态呈现组件，具体取决于网址路径。

使用NgComponentOutlet
渲染使用过的声明性方法方法
关于命令式和声明式方法的更多细节：https://stackoverflow.com/a/49840700/5677886

StackBlitz Demo

Answer 3

app-routing模块可以为（或不）功能模块的路由添加前缀。如果你不想要像/auth这样的路由前缀，无论是使用延迟加载还是不使用），你可以这样做：

APP-routing.module.ts：

  {
    path:             '',
    canActivate:      [AuthGuard],
    canActivateChild: [AuthGuard],
    children:         [
      {
        path:      '',
        component: HomeComponent,
      },
      {
        path:         '',
        loadChildren: 'app/auth/auth.module#AuthModule',
      },
      {
        path:      'settings',
        component: SettingsComponent,
      },
    ],
  },

延迟加载模块的顶部路径甚至不必是静态的，您可以使用如下配置：

AUTH-routing.module.ts：

const routes: Routes = [
  {
    path:      ':pageName',
    component: AuthComponent,
    resolve:   {
      pageInfo: AuthResolver,
    },
    children:  [
      {
        path:      'login',
        component: LoginComponent,
      },
      {
        path:      'register',
        component: RegisterComponent,
      },
    ],
  },
];

Answer 4

您需要定义到达延迟加载的AuthModule时会发生什么。通过使用ModuleWithProviders为AuthModule创建/导入路由文件来做到这一点。如果需要，可以添加子路由和路由器出口。

import { ModuleWithProviders } from '@angular/core';

export const authRoutes: Route[] = [

  { 
    path: '', 

 // path: '', redirects to children with no prefix in route
 // path: 'auth', prefix the route with 'auth' to create 'auth/log-in' 'auth/register'

    children: [                     
        { 
           path: 'log-in',
           component: LoginComponent,
          // outlet:'login' 
        },
        { 
            path: 'register', 
            component: RegisterComponent,
        //  outlet:'register' 
        },

        // redirects can be added to force the application to load your desired route 
       //{ path: '', redirectTo:'log-in' ,pathMatch:'full'},
    ]},
];
export const AuthRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);

然后，您的AuthModule会导入此路由文件。

//other imports
import {AuthRouting} from 'some/path/location';

@NgModule({
  imports: [
    CommonModule,
    AuthRouting,
    RouterModule
  ],

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

4 个答案:

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