是否可以在 angular 中使用两条路线？

Question

我使用 Angular7 做了一个 Angular 应用程序，我尝试使用两个 "router-outlet" 标签，例如，我有两个组件 "main" 和 "main2"，有一半相同，它们在父组件中路由，我想在两个子组件中路由它们的差异，这可能吗？你有什么办法可以探索吗？谢谢 ;)

Answer 1

好吧，如果我很了解你的问题。例如，您有登录和仪表板的情况很有可能

const routes: Routes = [
    {
        path: '',
        pathMatch: 'prefix',
        redirectTo: 'auth/login'
    },
    {
        path: 'loading',
        component: LoadingComponent
    },
    {
        path: 'auth/login',
        component: LoginComponent
    },
    {
        path: 'auth/forgot-password',
        component: ForgotPasswordComponent
    },
    {
        path: 'auth/register',
        component: RegisterComponent
    },
    {
        path: 'auth/reset-password-temp',
        component: ResetPasswordComponent
    },
    {
        path: 'dashboard',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'welcome',
                component: WelcomeComponent
            },
            {
                path: 'messages',
                canActivate: [AuthGuard],
                component: MessagesComponent
            },
            {
                path: 'student-add',
                component: StudentAddComponent
            },
            {
                path: 'student-edit',
                component: StudentEditComponent
            },
            {
                path: 'student-view',
                component: StudentViewComponent
            }

        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule],
    providers: []
})
export class RoutingModule {}

导入每个组件并正确引用路径

Answer 2

对于和我有同样问题的人，我使用一个"main"组件和一个"auth"组件。 "main" 组件包含 "router-outlet" 标记，我的 "auth" 组件包含我的登录视图。在我的 app.componnt.html 中，我只使用

<app-auth *ngIf="!isAuth"></app-auth>
<app-main *ngIf="isAuth"></app-main>

使用该方法，任何想要访问特定路径的用户都不会被重定向到 auth 视图，并将保留他想要访问的路径。

是否可以在 angular 中使用两条路线？

Is it possible to use two routes in angular?

angular-routing

angular-component-router

angular-v7