Angular 4动态修改URL报错及路由监听问题求助

一、先解决Cannot read property 'component' of null报错 #

这个错误通常和路由配置冲突或路由出口缺失有关，结合你的场景，主要需要修正这两个问题：

1. 根组件缺少路由出口
   你的AppComponent是bootstrap的根组件，同时又被配置为通配符路由的目标组件，但Angular路由需要一个<router-outlet>来渲染路由组件。请在app.component.html中添加路由出口：

   <!-- app.component.html -->
   <!-- 保留你的现有共享组件，比如导航组件 -->
   <nav-component></nav-component>
   <!-- 添加路由出口，路由组件会在这里渲染 -->
   <router-outlet></router-outlet>
   

2. 避免根组件重复实例化冲突
   把AppComponent同时作为根组件和路由组件，容易导致Angular在路由初始化时出现实例化冲突。更合理的做法是创建一个专门的内容组件（比如MainContentComponent），将原AppComponent的业务逻辑迁移过去，让所有路由指向这个新组件，而AppComponent只负责放置共享组件和路由出口：

   • 新建MainContentComponent并迁移业务代码
   • 修改路由配置：

     const appRoutes: Routes = [
       { path: '', component: MainContentComponent }, // 默认路由
       { path: '**', component: MainContentComponent } // 通配符路由
     ];
     

   如果坚持要所有路由都用AppComponent，至少要确保路由出口存在，并且在导航前检查button.slug不为空（空路径会导致路由解析失败）：

   navigateToSlug(button: any) {
     if (!button.slug) return;
     this.router.navigateByUrl(`/${button.slug}`).catch(err => console.error('导航失败:', err));
   }
   

二、解决URL变化监听无效的问题 #

你用this.location.go()修改URL的方式，只是直接修改了浏览器地址栏，并没有触发Angular的路由生命周期，所以自然监听不到变化。正确的做法是使用Router的导航方法，并通过Router的事件来监听URL变化：

1. 用Router导航代替location.go
   放弃location.go()，改用router.navigateByUrl或router.navigate，这样Angular会完整处理路由流程，包括触发路由事件。

2. 监听Router的NavigationEnd事件
   在组件中注入Router，并监听NavigationEnd事件（过滤掉其他无关的路由事件）：

   import { Router, NavigationEnd } from '@angular/router';
   import { filter } from 'rxjs/operators';
   
   // 在组件构造器中注入Router
   constructor(private router: Router) {
     // 监听URL变化
     this.router.events.pipe(
       // 只关注导航完成的事件
       filter(event => event instanceof NavigationEnd)
     ).subscribe((event: NavigationEnd) => {
       console.log('当前URL:', event.url);
       // 这里处理URL变化后的逻辑
     });
   }
   

三、完整代码调整示例 #

1. 修改后的app.module.ts路由配置

const appRoutes: Routes = [
  { path: '', component: MainContentComponent },
  { path: '**', component: MainContentComponent }
];

2. app.component.html模板

<nav-component></nav-component>
<router-outlet></router-outlet>

3. 组件中的导航与监听逻辑

// 导航方法
goToSlug(button: any) {
  if (button?.slug) {
    this.router.navigate([`/${button.slug}`]);
  }
}

// 监听路由变化（在ngOnInit中执行）
ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    console.log('URL已更新为:', event.urlAfterRedirects);
  });
}

这样调整后，既可以解决导航时的报错，又能正常监听URL的变化了。

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