Question

我想为我的应用创建布局。所以，我使用以下路线：

export const routes: Routes = [
{
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '', 
        redirectTo: 'contact',
        pathMatch: 'full'
      },
      {
        path: 'contact',
        loadChildren : 'app/contact/contact.module#ContactModule'
      }
    ]
  }

];

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

如您所见，我使用MainLayoutComponent进行布局。而且，当我的应用程序启动时，我想重定向到contact路径。

布局包含导航和router-outlet：

@Component({
  template: `
    <nav>Navigation content</nav>
    <div class="container"><router-outlet></router-outlet></div>
  `,
})

这是ContactComponent中的模板：
<h2>Contact Component</h2>

问题是，当应用运行时，我会看到Contact Component消息，但我看不到导航。但是，如果我打开localhost:3000/contact，我会看到导航和Contact Component消息。我错过了什么？

这是Plunker。您可以查看，我创建Go to Contact按钮以重定向到/contact网址。

Answer 1

也许你是故意这样做的......但你似乎真的过于复杂了。您可以使用更简单的结构轻松实现您想要做的事情，并将导航放在主要组件中：

https://plnkr.co/edit/pCQvJ3PwO0nMPxRvWR1o?p=preview

无论如何 - 你的插件没有按照你的期望做的原因是因为在你的触点模块中你也定义了一些路由：

    { path: '', component: ContactComponent }

我从联系人组件中删除了联系路由，现在它似乎正在运行：

@NgModule({
  imports:      [ ],
  declarations: [ ContactComponent ],
  providers:    [ ]
})
export class ContactModule { }

https://plnkr.co/edit/Rwl5Hw83LfkLmG4wF3oK?p=preview

Angular 2.所有路线的主要布局

1 个答案: