Angular 2在子路由上两次渲染页面答案

【问题标题】：Angular 2 Is rendering page twice on child routeAngular 2在子路由上两次渲染页面
【发布时间】：2017-02-14 10:26:08
【问题描述】：

我在 app.module.ts 中有以下路线

{
    path: 'settings',
    component: SettingsPage,
    children: [
    {
      path: 'account',
      component: AccountSettings
    }, {
      path: 'profile',
      component: ProfileSettings
    }]
  }

我的 settingsPage 组件有：

<div>
  <div class="xui-heading-panel secondary">
    <div class="container">
      <h1>Settings</h1>
      <ul class="nav nav-pills">
        <li 
          *ngFor="let link of links"
          role="presentation">
          <a [routerLink]="[link.route]" routerLinkActive="active">{{link.title}}</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</div>

当访问 /settings/profile 时，设置组件内的路由器出口会再次重新显示整个页面（例如，不仅仅是子页面）。我该如何解决这个问题？

【问题讨论】：

对帐户路由也这样做吗？尝试将“设置”组件移动到这样的位置：{path: 'settings', children: [{path: "", component: SettingsPage}, {path: 'account', component: AccountSettings}, {path: 'profile', component: ProfileSettings}]}
这个例子有什么问题？ plnkr.co/edit/hUaaWX5FsjzC7FH1nEwC?p=preview
我看不出有什么问题。你已经用第二个<router-outlet> 设置了它，子路由会去那个，所以看起来它的行为是正确的

标签： angular

【解决方案1】：

如果它对任何人都有帮助我在孩子们懒惰地加载模块时也遇到了这个问题例子 const routes: Routes = [ { path: "", component: SiteLayout, canActivate: [AuthGuard], children: [ { path: "search", loadChildren: () => import('./Search/search.module').then(m => m.SearchModule) } ] } ]

在这里，我在路由到 /search 时面临重新呈现页面在花费了大量时间之后，我才知道在搜索模块中 RouteeModule 没有被导入，这导致应用程序的行为像这样。

希望它会帮助任何陷入困境的人。

【讨论】：

【解决方案2】：

感谢各位的帮助。所以问题是我没有

moduleId: __moduleName（在我的 @Component 注释中），这意味着相对于组件目录没有请求 templateUrl。所以一个 HTTP 请求被发送到 /page_settings.html，这导致我的服务器返回 /index.html 并且整个应用程序都在容器内呈现。

【讨论】：