javascript - Angular 7 Url 更改但没有其他任何反应

Question

这是我第一次在这里发帖，我很绝望。我正在使用 Angular 7。问题是，当我手动输入所需的 url 时，它运行良好，但是当我按下按钮并使用 RouterLink 时，url 发生了变化，但没有其他任何反应。如果我按 F5，页面将重新加载并转到已更改的新 URL，所以这不是 url 路由问题。

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

我的代码如下:

我的 app.component.html

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

这是我的 app-routing.module

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { CitiesNavComponent } from './cities-nav/cities-nav.component';

const routes: Routes = [
  { path: "", redirectTo: "cities/Madrid", pathMatch: "full" },
  { path: "cities/:name", component: CitiesNavComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这是我的 cities-nav.component.html

    <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>

这是我的 cities-nav.component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute } from "@angular/router";
import { Router } from "@angular/router";

@Component({
  selector: "app-cities-nav",
  templateUrl: "./cities-nav.component.html",
  styleUrls: ["./cities-nav.component.scss"]
})
export class CitiesNavComponent implements OnInit {
  cityName: string;

  constructor(
    private location: Location,
    private route: ActivatedRoute,
    private router: Router,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
    console.log("Cities nav component OnInit executed");
    this.cityName = this.route.snapshot.paramMap.get("name");
  }
  goToCadiz() {
    this.ngZone.run(() => {
      this.router.navigateByUrl('/cities/Cadiz');
    });
  }
}

First screenshot of tracing Second screenshot of tracing

Answer 1

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

第一个，我必须在 cities-nav.component 中更改这一行:

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

收件人:

this.activeRoute.params.subscribe(routeParams => {
  this.cityName = routeParams.name;
  })

因为我一直在路径 'cities/:name' 上，所以即使我从一个城市切换到另一个城市，它也不会从输入中再次获取名称。这样订阅就解决了这个问题，每次你在同一路径内更改变量时都会给你新的参数。

另一个问题是在 app-content 内部，因为在 onInit 内部我调用了 cityService，它通过名称获取了一个城市。这个问题和另一个类似，它只到达城市一次，即使城市输入名称改变了。所以解决方案是创建一个方法 ngOnChanges 如下:

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

这样，每次组件输入 'cityName' 发生变化时，它都会获取新城市并进行更新。