В Angular, как я непосредственно перемещаюсь по пути в ленивом загруженном модуле?

Я хотел бы иметь два пути верхнего уровня для входа в систему и регистрации.

Я бы предпочел не делать 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 пути, чтобы перейти к log-in пути внутри ленивый загруженный AuthModule, и register пути идти в register пути внутри ленивый загруженный модуль?

ОТВЕТЫ

Ответ 1

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

Я постараюсь сказать, что это невозможно. Lazy loading модули Lazy loading загруженные переадресацией. Это означает:

  • Начало навигации по log-in.
  • Ленивый загрузочный модуль начинает загружаться
  • После успешной загрузки URL-адрес будет иметь значение 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>

Итак, как вы можете видеть, центральный компонент будет динамически отображать компонент в зависимости от пути URL.

Для рендеринга используемого метода декларативного подхода с помощью NgComponentOutlet

Подробнее о императивном и декларативном подходе: fooobar.com/questions/7231160/...

Демо-версия StackBlitz

Ответ 2

До сих пор невозможно настроить маршруты, как вы хотели бы сделать в своем сообщении. Вы можете видеть, что если вы включите ведение журнала для своего маршрутизатора. Путь для вашего модуля (вход в систему, регистрация) потребляется, и в вашей маршрутизации модуля вы останетесь '' слева", что невозможно сопоставить с двумя разными компонентами.

Вы можете добиться этого, тем не менее, даже если это не так, и я не знаю, как это работает в старых браузерах.

В вашем 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 в вашем браузере url, даже если клиент звонит просто /login.

Вы можете исправить это, создав запись в вашем window.history - как я уже сказал, не красивой, и это нужно сделать в конструкторе компонентов. window.history.pushState('register', 'Register', 'register'); или window.history.pushState('login', 'Login', 'login'); в компонентах останутся URL-адреса ваших браузеров с /login и /register.

Наилучшим способом было бы расширить угловой маршрутизатор с помощью этой функции и использовать его как настраиваемый маршрутизатор, но вам нужно будет в него поработать, и со следующим обновлением вы можете напортачить.

Может быть, это поможет вам

С наилучшими пожеланиями

Ответ 3

Модуль маршрутизации приложений может префикс (или нет) маршрутов модуля функций. Если вам не нужен префикс маршрута, например /auth, либо с использованием ленивой загрузки, либо нет), вы можете сделать что-то вроде этого:

приложение-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,
      },
    ],
  },
];

Ответ 4

Вам нужно определить, что происходит, когда вы приходите к ленивому загруженному AuthModule. Сделайте это, создав/импортировав файл маршрутизации для своего AuthModule с помощью ModuleWithProviders. При необходимости могут быть добавлены маршруты для детей и роутеры.

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
  ],