Javascript Angular 7 Url发生了更改，但没有其他变化

这是我第一次在这里发帖，我非常绝望。 我用的是Angular 7。问题是，当我手动键入所需的url时，它工作得很好，但当我按下按钮并使用RouterLink时，url会更改，但不会发生其他任何事情。如果我按F5，页面将重新加载，并将转到已更改的新URL，因此这不是URL路由问题

我目前只在两个按钮中实现了routerLink（在cities nav中），同时对其进行了测试。 我还在app-component.html中实现了一个临时组件，以防出现材质菜单问题，但它也不起作用。 控制台什么也没说。我在cities nav组件的onInit中有一个console.log，它会在第一次加载web时触发，但在我使用routerLink时不会触发，所以它甚至不会到达那里。 我还尝试使用（单击）事件执行一个方法。也不行

我的代码如下：

My app.component.html

<div style="text-align:center">
<nav>
<a routerLink="/">Go home</a>
</nav>
</div>
<router-outlet></router-outlet>

    <div class="container">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span *ngIf="cityName" class="mdl-layout-title">{{this.cityName}}</span>
        <div class="mdl-layout-spacer"></div>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Cities</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" routerLink="/cities/Madrid" routerLinkActive="active">Madrid</a>
        <a class="mdl-navigation__link" routerLink="/cities/Barcelona">Barcelona</a>
        <a class="mdl-navigation__link" (click)="goToCadiz()">Valencia</a>
        <a class="mdl-navigation__link" href="">Cádiz</a>
        <a class="mdl-navigation__link black-text" href="">ABOUT</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content"><app-content *ngIf="cityName" [cityName]="this.cityName"></app-content></div>
    </main>
  </div>
</div>

这是my cities-nav.component.html

<div style="text-align:center">
<nav>
<a routerLink="/">Go home</a>
</nav>
</div>
<router-outlet></router-outlet>

    <div class="container">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span *ngIf="cityName" class="mdl-layout-title">{{this.cityName}}</span>
        <div class="mdl-layout-spacer"></div>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Cities</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" routerLink="/cities/Madrid" routerLinkActive="active">Madrid</a>
        <a class="mdl-navigation__link" routerLink="/cities/Barcelona">Barcelona</a>
        <a class="mdl-navigation__link" (click)="goToCadiz()">Valencia</a>
        <a class="mdl-navigation__link" href="">Cádiz</a>
        <a class="mdl-navigation__link black-text" href="">ABOUT</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content"><app-content *ngIf="cityName" [cityName]="this.cityName"></app-content></div>
    </main>
  </div>
</div>

---

Ngonit中的控制台日志将只调用一次。如果要检测参数的更改，请订阅activateRoute中的paraMap

在下面的链接中创建了一个示例演示。

---

好吧，过了很长时间我才知道发生了什么。我实际上有两个问题

首先，我必须在cities-nav.component中更改这一行：

this.cityName = this.route.snapshot.paramMap.get("name");

致：

因为我总是在路径'cities/：name'上，所以即使我从一个城市换到另一个城市，它也不会从输入中再次获得名称。因此，subscribe解决了这个问题，并且在每次更改同一路径中的变量时，它都会为您提供新的参数

另一个问题是在应用程序内容中，因为在onInit中，我调用了cityService，该服务获得了一个城市的名称。问题与另一个类似，它只到达城市一次，即使城市输入名称发生更改。因此，解决方案是创建一个方法ngOnChanges，如下所示：

ngOnChanges(changes: SimpleChanges): void {
//Add '${implements OnChanges}' to the class.
this.getCityByName(this.cityName);
}

---

这样，每次组件输入“cityName”发生更改时，它都会获取新的城市并进行更新。

首先，如果触发了路由事件，您可以尝试不记录所有要检查的路由事件。您可以通过在路由模块中做一个小的更改来实现这一点：

RouterModule.forRoot（路由，{enableTracing:true}）

感谢您的回答。我启用了跟踪并观看了控制台，但我还不知道跟踪是如何工作的，所以我无法从那里得到任何信息。我拍了几张截图，它们在文章的末尾，也许你能理解。我猜你是在《城市/巴塞罗那》中拍摄到这张截图的。如果是这样的话，看起来根本不像是启动了导航。目前我不知道如何操作，我想在开始导航之前我在马德里。我重复了这个过程，控制台抛出了完全相同的结果。我可以给你更多的细节，或者给你看其他的结果，如果你需要的话。这应该很容易放在stackblitz上。有助于理解您面临的问题。（但我敢打赌这个问题不能在某人身上重复）谢谢你的回答！我刚把我的发了出去，然后读了你的。这对我会有很大帮助，所以谢谢：）

ngOnChanges(changes: SimpleChanges): void {
//Add '${implements OnChanges}' to the class.
this.getCityByName(this.cityName);
}