Question

我有两个组成部分LoginComponentA和LoginComponentB。应根据与访问门户网站相关的变量来访问它们。并且它们应该在相同的网址下。

我试图通过以下方式实现它：

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

但是我在ng服务上出错：

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

我认为您应该创建一个虚拟容器组件，并在其中使用此条件。

例如

{
   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;
   }
}

Answer 2

您可以使用匹配器实现此目的，因此可以使用相同的路由制作多个路由元素：

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使用首个匹配路线。因此，如果您定义路径，则第一个匹配的路径将获胜，而第二个定义将永远不会到达。但是，如果您在匹配器中返回null，它将尝试下一个定义。

这里有更详细的说明：https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

Angular 4在同一路径下显示不同的组件

2 个答案: