Angular如何使用两个骨架模板？

Question

有两个包装组件 WrapperComponent1 和 WrapperComponent2。他们里面是<router-outlet></router-outlet>.

它们只是不同 HTML:

WrapperComponent1

<div class="wrap1">
 <router-outlet></router-outlet>
</div>

WrapperComponent2

<div class="wrap2">
     <div class="menu"></div>
     <router-outlet></router-outlet>
 </div>

我想在 WrapperComponent1 中显示 RegisterComponent，在 WrapperComponent2 中显示 LoginComponent。

如何构建路由？

我试过了：

const routes: Routes = [
  { path: "register", component: RegistrationComponent },
  { path: "login", component: LoginComponent },
];

Answer 1

您必须使用 Angular 路由器的 ChildRoutes 功能。

您定义了 2 个主要的空路径来加载您的 2 个不同的包装组件，然后将 2 个实际路由定义为子路由：

const routes: Routes = [
  { path: '', component: WrapperComponent1,
        children: [
            path: 'register', component: RegistrationComponent }
        ]
    },
  { path: '', component: WrapperComponent2,
        children: [
            path: 'login', component: LoginComponent }
        ]
    }
];

更新：

请确保在您的路由树以及您的主要 app.component.

中的所有 parent 组件中至少有一个 <router-outlet></router-outlet>

Angular如何使用两个骨架模板？

How to use two skeleton templates in Angular?

angular

angular7

angular8