Question

我的Angular路由有问题。我有主应用程序路由模块和子模块有自己的路由模块和路由器插座，但在这个子模块中定义的路由使用根路由器插座而不是子路由器插座显示。

我的文件夹结构：

我的代码清单

应用-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<router-outlet></router-outlet>

主-routing.module.ts

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

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

home.component.html

...
<div class="inner cover">
  <router-outlet></router-outlet>
</div>
...

这就是我使用空路径时得到的结果 - 它正确地打开了主页组件。

但是当我输入/注册时，我从home.component.html文件中没有模板的login.component.html获取普通的html

修改

我在儿童商店添加了名字

<router-outlet name="home"></router-outlet>

将路线名称更改为：

const routes: Routes = [
  { path: '', component: LandingPageComponent, outlet: 'home'},
  { path: 'register', component: RegisterComponent, outlet: 'home' },
  { path: 'login', component: LoginComponent, outlet: 'home' }
];

现在我收到了这个错误：

编辑2

我尝试以两种方式访问这些路线：链接（可能不正确）：

<a routerLink="/login">Log In</a></li>

或手动输入：

localhost:4200/login

Answer 1

在Angular 2中，路由器出口可以命名为：

<router-outlet>
    <router-outlet name="children"></router-outlet>
</router-outlet>

应用：

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

主页：

const routes: Routes = [
  { path: '', component: LandingPageComponent, outlet: 'children'},
  { path: 'register', component: RegisterComponent, outlet: 'children' },
  { path: 'login', component: LoginComponent, outlet: 'children' }
];

您甚至可以定义子路线：

const routes: Routes = [
  { path: '', 
    component: HomeComponent, 
    pathMatch: 'full', children: [
      { path: '', component: LandingPageComponent, outlet: 'children'},
      { path: 'register', component: RegisterComponent, outlet: 'children' },
      { path: 'login', component: LoginComponent, outlet: 'children' }
    ] 
   }
];

http://onehungrymind.com/named-router-outlets-in-angular-2/

Answer 2

如果您希望这3个组件在命名插座中的HomeComponent 内呈现，则需要定义以下路径：

const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'landing', component: LandingPageComponent, outlet: 'children'}, { path: 'register', component: RegisterComponent, outlet: 'children' }, { path: 'login', component: LoginComponent, outlet: 'children' } ];

在app.component.html内添加指定的路由器插座

....//html template <router-outlet name="children"></router-outlet> ....//html template

编辑1：

要导航到指定的商店，您需要使用以下路由链接：

//inside of home.component.html <a [routerLink]="[{ outlets: { children: ['login'] } }]">Take me to login!</a>

生成的链接如下所示：

root/(children:login)

以下link to the docs
中的更多信息
编辑2：

我更改了原来的路径和组件模板，其中添加了指定的插座。为什么呢？

据我所知，不可能有一个带有空路径的命名插座（＆＃39;＆＃39;）。空路径告诉angular指定的出口是空的（当前没有组件在其中呈现）。

Answer 3

我相信你的问题与声明有关。我无法确定，因为您没有在 app.module.ts 和 home.module.ts 文件中显示代码，并且未对此进行全面测试自己。

需要在连接到具有所需路由插座的模板的模块内声明组件。在您的情况下，需要将登录组件添加到＆＃34;声明＆＃34;在你的home.module.ts文件中删除＆＃34;声明＆＃34;在app.module.ts文件中。

Angular似乎不允许您在多个路由出口中重复使用相同的组件，除非它们位于同一模板中，因为它会导致错误声明在多个模块中声明的＆＃34; x组件＆＃34;。

Angular使用错误的路由器插座

3 个答案: