javascript - Angular 7网址发生变化，但没有其他 react

这是我第一次在这里发帖，我非常绝望。
我使用的是Angular7。问题是，当我手动键入所需的url时，它运行良好，但是当我按一个按钮并使用RouterLink时，该url发生了变化，但没有其他反应。如果我按F5键，则页面将重新加载并转到已更改而没有麻烦的新URL，因此这不是URL路由问题。

我目前仅在两个按钮中(在citys-nav中)实现了routerLink，同时对其进行了测试。
我还在app-component.html中实现了一个临时菜单，以防万一这是“ Material ”菜单问题，但它也不起作用。
控制台什么也没说。而且，在citys-nav组件的onInit内有一个console.log，它会触发第一次加载Web，但不是在我使用routerLink时触发的，因此它甚至没有到达那里。
我也尝试执行带有(单击)事件的方法。也不起作用。

我的代码如下:

我的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 {}

这是我的citys-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>

这是我的citys-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

最佳答案

好吧，很长一段时间后，我发现发生了什么事。我实际上有两个问题。

首先，我必须在citys-nav.component中更改此行:

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

至:

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

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

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

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

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

关于javascript - Angular 7网址发生变化，但没有其他 react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55152739/