Question

Angular是为单页应用程序构建的，因此应该可以更改路径但只更改浏览器窗口中的某些元素，对吧？

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

是否可以导航到不同的路线并保持主导航组件不受影响？

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

有什么想法吗？

非常感谢！

Answer 1

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

一样

因此，当您更改路线时，它只会影响路由器插座。您的主导航只会初始化一次。

主navigation.component.ts

public class MyApp{
   String compilationTime = 'xxxx';

   public String getCompilationTime(){
      return compilationTime;
   }

}

app.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 {

}

角度变化路线但保持导航原样

1 个答案: