javascript - 使用 Angular Router 获取 URL

我需要在一个组件（我的导航组件）中获取我当前的路由（使用路由器），该组件位于应用程序组件中，但由于它已经加载，点击时不会刷新，而且我在导航组件中的函数没有返回任何新的 URL。我如何才能在我的导航组件中获取新的 URL？

这是我的应用组件：

<app-nav></app-nav>
<body>
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</body>

这是我的导航组件 (.ts) :

ngOnInit() {
    console.log(this.router.url);
    if(this.router.url == "/") {
      this.color = "large";
      this.logoPath = "assets/logos/w-logo-full.png";
    } else {
      this.color = "small";
      this.logoPath = "assets/logos/c-logo-full.png";
    }

当我的 app-nav 在每个组件中时，它是正常工作的，但自从我移动它之后，它就不再工作了。

答案＃1

你可以使用路由器服务事件可观察对象

app.component

  constructor( public router: Router,) {
  }

  public ngOnInit(): void {
    this.router.events.subscribe(e => {


      if (e instanceof NavigationEnd) {
        console.log(this.router.url);
        // ... 
      }

    });
  }

NavigationEnd 当导航成功结束时触发的事件。

答案＃2

你需要订阅 ActivatedRoute 服务

类似这样：添加 ActivatedRoute：

 constructor(
        protected route: ActivatedRoute,
        ...) {
   }

添加订阅：

this.route.url.subscribe(value => {
     ....
    });