Question

我有一个带有子模块和子路径的应用程序。我需要安装一个响应每个路由器更改的服务。

我的问题是我无法找到初始化它的方法。 Angular Module没有NgOnInit，我可以传递路由器对象，RouterModule也没有。

除非我在每个组件中将路由器传递给我的服务，否则我看不出如何解决这个问题。

另一个想法是使用警卫来设置路由器，但这看起来很脏，因为那不是守卫的用途。

Answer 1

您是否可以在主组件中注入路由器（通常在app.component.ts中），然后订阅其事件？

export class AppComponent {
   constructor(private router: Router) {}

   ngOnInit() {
      this.router.events.subscribe( event => {
        //here you will have an event, such as NavigatiunStart, NavigationEnd, etc...
      })
   }
}

Answer 2

有一个路由服务RouteService监听路由更改并相应地执行操作。在RouteService中注入此app.component.ts。别忘了在app.module.ts中提供服务。

因为这个服务会有单个实例。你可以用它来挂钩路线改变

@Injectable()
export class RouteService {
constructor(public router: Router) {
    // this.initialize();  // You can initialize from here or from app component
}

initialize() {
    this.router.events.filter((event) => event instanceof NavigationEnd).subscribe((event: any) => {
        this.onRouteChange(event);
    });
}
onRouteChange() {
   // Handle route change.
}
}

注入app.component.ts

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
   constructor(
       public routeService: RouteService) {
   }
   ngOnInit(): void {
    this.routeService.initialize(); // Intitialize here.
  }
}

收听多个路由器

2 个答案: