Angular 更改路线但保持导航不变

Question

Angular 是为单页应用程序构建的，所以应该可以更改路由，但只能更改浏览器中的某些元素 window，对吗？

例如，我有一个包含主要导航组件和内容区域组件的简单页面。

是否可以导航到不同的路线并保持主要导航组件不变？

目前，当我导航到不同的路线时，主导航组件总是会重新加载（OnInit 被触发）。

有什么想法吗？

非常感谢！

Answer 1

您似乎已将主要导航组件嵌入到分配给不同路线的另一个组件中。我可以建议的是，如果每个页面都有一个共享导航，请将其保存在 app.component 中，与 router-outlet 处于同一级别。就像 official example from Angular team.

所以当你改变路由时，它只会影响路由器出口。您的主导航只会初始化一次。

主-navigation.component.ts

@Component({
  selector: 'main-navigation',
  template: `
    <nav>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    </nav>
  `
})

export class MainNavigationComponent {

}

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <main-navigation></main-navigation>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}

Angular 更改路线但保持导航不变

Angular change Route but keep navigation as is

angular2-routing

angular