Угловой 4 Показать другой компонент под тем же маршрутом

Question

У меня есть два компонента LoginComponentA и LoginComponentB.Каждый из них должен быть доступен в зависимости от переменной, связанной с доступом к порталу.И они должны быть под таким же URL-адресом .

Я пытался добиться этого с помощью:

{
    path: 'login',
    component: (() => {
        switch (AppSettings.loginPortal) {
            case 'portalA':
                return LoginComponentA;
            case 'portalB':
                return LoginComponentB;
        }
    })()
}

Но я получил ошибки в ng serve:

ERROR in Error encountered resolving symbol values statically.
Reference to a local (non-exported) symbol 'appRoutes'.
Consider exporting the symbol (position 42:7 in the original .ts file), resolving symbol AppRoutingModule in /home/lis/apps/AZGIV/src/app/app-routing.module.ts

Если я оберну функцию после компонента следующим образом:

export function getLoginComponent() {
    switch (AppSettings.loginPortal) {
            case 'portalA':
                return LoginComponentA;
            case 'portalB':
                return LoginComponentB;
    };
}
...
{
    path: 'login',
    component: getLoginComponent
}

Я получу ошибки:

Type '() => typeof LoginComponentA | typeof LoginComponentB' is not assignable to type 'Type<any>'.

Как я могу исправить ошибку?Или есть другой способ условного отображения компонентов по тому же маршруту?

Я использую Angular 4.2.4

Answer 1

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

const loginRoutes: Routes = [
    {
        matcher: (url: UrlSegment[]) => {
            if (url[0] === '/login' && useComponentA) {
                return { consumed: [url[0]] };
            }
            return null;
        },
        component: LoginComponentA
    },
    {
        matcher: (url: UrlSegment[]) => {
            if (url[0] === '/login' && useComponentB) {
                return { consumed: [url[0]] };
            }
            return null;
        },
        component: LoginComponentB
    },
];

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

Вот более подробное объяснение: https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

Answer 2

Я думаю, что вы должны создать фиктивный компонент контейнера, в котором вы должны использовать это условие.

например

{
   path: 'login'
   component: LoginContainerComponent
}


@Component({
    template: `
    <app-login-component-a *ngIf="loginPortal === 'portalA'"></app-login-component-a>
    <app-login-component-b *ngIf="loginPortal === 'portalB'"></app-login-component-b>
    `

})
export class LoginContainerComponent {
   loginPortal: '';

   constructor() {
       this.loginPortal = AppSettings.loginPortal;
   }
}