Html 如何在Angular中实现用户旅程进度条？

我是Angular的新手，所以我已经看过了文档和示例代码。但是，我不明白的是，在用户单击每个页面上的“继续”后，如何使进度条增加？ 在用户介绍网站的过程中，大约有15个页面，所以我只想在底部有一个简单的进度条，向他们展示他们的旅程有多远。 我考虑使用的代码是：

<section class="progress-section">
  <mat-progress-bar
      class = "progressbar"
      [color] = "color"
      [mode] = "mode"
      [value] = "value">
  </mat-progress-bar>
</section>

现在会出现一个值为0的进度条，但我希望能够在随后的每个页面中更改该值

对于更多的背景，用户旅程中大约有15个页面，它们都用不同的组件编码。我的想法是在根html/ts文件中实现这个进度条，然后在单击“继续”后在每个文件中以某种方式修改进度条的值？最简单的方法可能是让每个页面都有一个设置值，当页面加载时，进度条将变为该值，这样我就不必担心返回和退出/重新启动

---

任何帮助都将不胜感激

这真的取决于你在编码什么，如何编码，以及很多情境因素。如果页面是静态的，那么流程很简单，每个页面都单独加载。我不认为页面是静态的，因为当我点击“继续”时网站不会重新加载。这是我一直在努力解决的问题，因为我的第一次尝试只是在每个页面上更改一个公共值，但它实际上并没有更新进度条。是否为每个页面使用不同的组件（这就是我所说的“静态”^^）？

color: ThemePalette = 'primary';
mode: ProgressBarMode = 'determinate';
value = 0;