Angular 使用了错误的路由器插座

Posted 2023-02-22

【中文标题】Angular 使用了错误的路由器插座

【英文标题】：Angular uses wrong router-outlet

【发布时间】：2017-11-18 12:11:07

【问题描述】：

我对 Angular 路由有疑问。我有主应用程序路由模块和具有自己的路由模块和路由器出口的子模块，但是在此子模块中定义的路由使用根路由器出口而不是子路由器出口显示。

我的文件夹结构：

我的代码清单

app-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>

home-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>
...

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

但是当我输入 /register 时，我会从 login.component.html 获得纯 html，而 home.component.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

我尝试通过 2 种方式访问​​这些路由： 一个链接（可能不正确）：

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

或者手动输入：

localhost:4200/login

【问题讨论】：

在家庭路由中添加子节点：[ ... ] 在您定义子路由的路由中

【参考方案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/

【讨论】：

尝试只为子插座命名。

还是同样的问题：/

完成！我希望它可以很容易地修复:)

不用name="children"，只对我有效

【参考方案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：

我更改了原来的路由和添加了命名插座的组件模板。为什么？

据我所知，不可能有一个带有空路径 ('') 的命名出口。空路径告诉 Angular 命名的出口是空的（当前没有组件在其中呈现）。

【讨论】：

您能否在问题中添加您如何尝试访问路线？ :)

给你了 :)

编辑了我的答案

已编辑答案，命名插座确实有点棘手，今天我在我的一个项目中配置命名插座有点困难

【参考方案3】：

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

需要在模块内声明一个组件，该模块连接到具有所需路由出口的模板。在您的情况下，登录组件需要添加到 home.module.ts 文件中的“声明”中，并从 app.module.ts 文件中的“声明”中删除。

Angular 似乎不允许您在多个路由出口中重用相同的组件，除非它们在同一个模板中，因为它会导致错误说明“在多个模块中声明的 x 组件”。

【讨论】：

欢迎来到 Stack Overflow！这不符合作为现有问题的答案或提供任何解决方案的条件。这应该作为评论放置。如果您不能发表评论，那么您不应该滥用答案/解决方案部分，因为它只会导致投反对票，这意味着声誉会降低，从而难以获得足够的声誉来发布 cmets。我建议你删除这篇文章。

我希望我的编辑足够好，可以作为答案:)