Question

我正在构建包含多个应用的应用。

典型地：

<body>
    <app-header></app-header>
    <app-root></app-root>
</body>

app-header包含LoginComponent，RegisterComponent。 app-root包含HomeComponent。 AppRoot是<router-outlet>所在的主应用。 AppHeader基本上就是nav。

为什么我使用2个应用程序？因为我需要app-header 3个不同的项目app-header将完全相同。（也许这不是最好的解决方案？）

我的问题是处理这两个独立应用之间的路由。

这是我的app-header路由：

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

这是我的app-root路由：

const appRoutes: Routes = [
  { path: '', component: HomeComponent }
];

问题是，有两条路线会导致问题。如果我点击登录nav按钮，它会正确引导我转到LoginComponent，网址将更改为http://localhost:4200/login ，但 HomeComponent会留下来，导致这个：

即使网址为Home，也会显示Login和/login个组件。这是因为app-root不知道网址的修改，因为/login是app-header的一部分。

我认为解决方案是只使用一个appRoutes来管理app-root和app-header组件路由。像这样：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

但是，LoginComponent和RegisterComponent并不存在于当前应用中，因此它不会起作用。

因此，该解决方案要么设法使其与主要appRoutes一起使用，要么为appRoutes和app-header提供两个不同的app-root，它们都会知道网址＆＃39;修改。

在同一页面上使用多个应用路由

0 个答案: