角度路由，是重新加载整个 html 页面，还是只是页面的一部分？

Question

我想找到答案：在 Angular 路由中，当单击链接并生成路由 url 时，是重新加载整个 html 页面，还是仅重新加载页面的一部分？

使用 Angular 基础教程“Tour of Heroes”，我在每个组件的 html 模板中添加了一条语句，以不同颜色绘制一个框（代码来自here 和此处）。比如……

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>
<div style="width:100px;height:100px;border:1px solid rgb(255, 255, 0);">This is app component!</div>

<router-outlet></router-outlet>
<app-messages></app-messages> 

但我无法判断是否只重绘了面板而不是整个页面。

为了测试这一点，我想每次都用随机颜色绘制矩形。 创建随机颜色形状的目的是区分矩形是改变颜色（整个页面被重新加载）还是组件中只有矩形的颜色改变（然后只有组件被重新加载）。

关注here和here的文章

我创建了一个 src/custom.js 文件并将其放入

(function random_rgba() {
    var o = Math.round, r = Math.random, s = 255;
   // return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
    document.write("<div style=\"width:100px;height:100px;border:1px solid " + " rgb(0, 255, 0);" + ">This is a hero detail component!</div>");
})()

在 angular.json 中，

    "scripts": [
      "src/custom.js"
    ]

但是在 hero-detail.component.html 中

<div><script>random_rgba();</script></div>

重新加载页面时没有绘制彩色矩形。 :(

Answer 1

您使用的“routerLink”属性是 Angular 路由器的一部分。 Angular 路由器负责更改 URL 并相应地显示组件。当您使用它时，它不会刷新整个浏览器。

只有在你的路由数组中匹配的组件才会被重新加载。 Router Outlet 上方/外部的所有组件都保持其本地状态，并且不会被路由重建。

你也可以有多个Router Outlets，如果是这样，只有相关Router Outlet里面的部分会被重新加载。

如果您从变更检测的角度来看它，那么变更检测很可能会在您的整个应用程序中运行，因为它会在所有其他发生的事件上运行。不过，可以通过在组件中使用更改检测策略 OnPush 来避免这种情况。