Angular 2在子路由上呈现两次页面

时间:2016-10-05 20:24:16

标签: angular

我在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时,设置组件内的路由器插座会再次重新显示整个页面(例如,不仅仅是子页面)。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

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

在这里,我在路由到/ search时面临页面的重新渲染 在花费了大量时间后,我才知道未导入in搜索模块中的RouteeModule,这导致应用程序的行为类似于thi。

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

答案 1 :(得分:0)

感谢帮助人员。所以问题是我没有

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