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

Question

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

我的文件夹结构：

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>

家庭教学模块.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 { }

首页.组件.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

Answer 1

我相信你的问题与声明有关。我不能确定，因为你没有在app.module.ts和home.module.ts文件中显示代码，也没有亲自测试过。

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

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

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)

更多信息请点击以下文档链接

编辑2：

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

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

Answer 3

在 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/