Angular 7 Url 改变但没有其他发生

Question

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

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

我的代码如下：

我的应用程序。component.html

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

这是我的应用-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 {}

这是我的城市导航。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>

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

只会调用 ngOnInit 中的控制台日志once.If 你想检测参数的变化然后订阅 activateRoute 中的 paraMap。

在下面的 link 中创建了示例演示。 https://stackblitz.com/edit/angular-mriyze?file=src%2Fapp%2Fcities-nav.component.ts

Answer 2

好吧，弄了半天我才知道是怎么回事。我实际上有两个问题。

第一个，我不得不在城市中更改这条线-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'改变时，它都会得到新的城市并更新。

Angular 7 Url 改变但没有其他发生

Angular 7 Url changes but nothing else happens

javascript

typescript

angular-ui-router

angular

angular7