Angular/router v10.1.6 - 路由器导航唯一 ID 始终为 1 且永不更改。和其他 router.events.pipe 个异常

Question

在我的 Angualr 10.1.6 网络应用程序中，我按以下方式设置 RouterModule：

RouterModule.forRoot([
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: PageHomeComponent },
    { path: 'page1', component: Page1Component }], { enableTracing: true })

PageHomeComponent 和 Page1Component 的 html 模板包含相同的选择器：

<app-view-loader></app-view-loader>

此选择器引用了一个独特的通用组件，即 view-loader 组件，它包含几个用于管理整个 UI 网络应用程序的子组件。导航应用程序并更改路径（从“/home”传递到“/page1”）加载不同的组件（From PageHomeComponent to Page1Component）。但是两个组件都引用相同的视图，即 view-loader。简单地说，在视图加载器中使用 *ngIf 指令，应用程序会根据当前 URL 选择显示和隐藏正确的子组件。

第一期：在更改 URL 并将表单 /home (component: PageHomeComponent) 传递到 /page1 (component: Page1Component) 路由器分配给每个导航的唯一ID，永远不会改变。它始终保持相同的值：1.

在第一次加载应用程序时，我在调试控制台中看到以下内容：

- NavigationStart { id: 1... }
- RoutesRecognized { id: 1, url: '/', urlAfterRedirects: '/home' ... } 
- ...
- NavigationEnd { id:1...}

导航到 url“/Page1”后，我看到以下内容：

- NavigationStart { id: 1, url: '/page1', navigationTrigger: 'imperative', restoredState: null ...}
- RoutesRecognized (id: 1 ...)
- NavigationEnd { id:1...}

...等等... 路由器分配给每个路由器导航的唯一ID，永远不会改变。

这是第一个异常

第二个问题发生在我按下浏览器的 back/forward buttons 时。在这种情况下，字段 navigationTrigger 的值仍然是 'imperative' 并且 restoredState 为空。

最后，第三个问题出现在我调试下面这段代码时，包含在容器组件view-loader的构造函数中，应用程序的每个子视图都引用到。这是代码：

constructor(private route: ActivatedRoute, private router: Router) {   
    this.router.events
    .pipe(
      filter(
        (event: NavigationEvent) => {
          return(event instanceof NavigationStart);
        }
      )
    )
    .subscribe(
      (event: NavigationStart) => {
        console.log(event);      
     }
   );

在调试期间，每次 URL 发生变化并调用 "filter" 函数时，对象 event: NavigationEvent 只会获得类型 NavigationEnd。我从来没有看到 NavigationEvent 对象采用 NavigationStart 类型，也没有看到所有其他类型都引用管道的不同事件。可能这就是为什么代码段“return(event instanceof NavigationStart)”从不return向订阅方法发送 NavigationStart 对象。此外，subscribe 方法在调试期间从不调用。

最后，NavigationEvent 始终是 NavigationEnd，即使我们之前已经看到在调试控制台中触发了所有事件（NavigationStart、...、ChildActivationStart、ActivationStart、...NavigationEnd）。

有人知道为什么会这样吗？谢谢。 E.

Answer 1

第 n 期。 1: 导航应用程序，更改URL后，路由器分配给每个导航的唯一ID，永远不会改变。它总是 1.

解决方法：要在应用程序中打开一个或多个路由组件时跟踪一组完整的导航信息，应用程序 routing-module 的 Routes 数组中的相关组件的路径匹配不足。要从路径目标移动到另一个生成新标识符，（即使激活的应用程序组件可以始终相同）您必须将 routerLink 放在模板的锚标记中或在打字稿中使用 router.navigate() 方法代码。例如，如果您直接在浏览器的导航栏中键入 URL，则导航唯一 ID 不会改变。同样，在模板中使用不带 routerLink 指令的标签，会产生相同的结果。唯一 ID 在导航过程中永远不会改变。

第 n 期。 2：按浏览器的 back/forward 按钮，字段“navigationTrigger”的值保持 'imperative' 并且“restoredState”为空。

解决方法：在应用程序模板中使用 routerLink 或调用 router.navigate() 方法来更改应用程序视图，也修复了第二个问题，与第一个问题完全一样。字段“navigationTrigger”获得值“popstate”，“restoredState”正确地跟踪导航先前的状态。

Angular/router v10.1.6 - 路由器导航唯一 ID 始终为 1 且永不更改。和其他 router.events.pipe 个异常

Angular/router v10.1.6 - router navigation unique ID is always 1 and never changes. And other router.events.pipe anomalies

angular

angular-ui-router