Question

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

Answer 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。

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

Answer 2

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

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

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

2 个答案: