Angular使用router.navigate仅路由地址变化不加载组件视图如何解决

• 你的判断逻辑仅在父组件ngOnInit生命周期执行一次，路由切换时父组件不会重新初始化，showSibling1、showSibling2的状态不会更新，*ngIf控制的组件自然不会切换显示。
• 路由匹配逻辑和你手动写的组件渲染逻辑冲突：Angular路由匹配到的组件默认应该渲染到<router-outlet>占位符中，你手动用*ngIf控制组件渲染的写法不符合路由的设计逻辑，属于多余操作。
• 原有路由判断逻辑存在语法错误：router.url返回的路径带前缀斜杠（实际值为/sibling1而非sibling1），原有case分支永远匹配不到，初始化时状态也会错误。

删除父组件中所有手动控制组件显示的逻辑，直接在父组件模板中添加<router-outlet>即可，路由会自动根据匹配结果渲染对应组件：

1. 删掉parentcomponent.ts中的showSibling1、showSibling2变量和ngOnInit里的路由判断逻辑
2. 修改parentcomponent.html内容为：

<router-outlet></router-outlet>

不需要写任何app-siblingcomponent1、app-siblingcomponent2的标签，路由会自动完成组件的渲染和销毁。

如果必须保留你现有的手动控制逻辑，需要监听路由变化事件动态更新显示状态，同时修正路径匹配的问题：
修改parentcomponent.ts代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  // 你的原有组件元数据
})
export class ParentComponent implements OnInit, OnDestroy {
  showSibling1 = false;
  showSibling2 = false;
  private routerSub: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由跳转结束事件
    this.routerSub = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 先重置所有显示状态
        this.showSibling1 = false;
        this.showSibling2 = false;
        // 路径匹配要带前缀斜杠
        switch(event.urlAfterRedirects) {
          case '/sibling1':
            this.showSibling1 = true;
            break;
          case '/sibling2':
            this.showSibling2 = true;
            break;
        }
      }
    })
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅避免内存泄漏
    this.routerSub?.unsubscribe();
  }
}

内容的提问来源于stack exchange，提问作者mevr