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

Question

This is the first time I post here, I'm quite desperate. Im using Angular 7. The problem is that when I manually type the desired url, it works well, but when I press a button and use RouterLink, the url changes but nothing else happens. If I press F5, the page will reload and will go to that new URL that has changed without trouble, so it's not a url routing problem.

I only implemented the routerLink in two buttons for the moment (in cities-nav), while I test it. I also implemented a temporary one in app-component.html just in case it was a Material menu problem, but it doesn't work either. Console says nothing. And I have a console.log inside the onInit of the cities-nav component, which triggers the first time that loads the web, but not when I use routerLink, so it doesn't even get there. I also tried executing a method with a (click) event. Doesn't work either.

My code is the following:

My app.component.html

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

This is my 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 {}

This is my 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>

This is my 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

Okay, after a long time I found out what was happening. I actually had two problems.

First one, I had to change this line in cities-nav.component:

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

To:

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

Because I always was on the path 'cities/:name', so even if I changed from one city to another, it didn't get the name again from the input. So that subscribe solves the problem, and will give you the new param every time you change the variable inside the same path.

The other problem was inside the app-content, because inside onInit I called the cityService which got a city by a name. The problem was similar to the other one, it only reached the city once, even if the city input name changed. So the solution was creating a method ngOnChanges as follows:

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

This way every time the component input 'cityName' changes, it will get the new city and update.

Answer 2

console log in the ngOnInit will be called only once.If you want to detect change in the parameters then subscribe to the paraMap in activateRoute.

created a sample demo in the link below. https://stackblitz.com/edit/angular-mriyze?file=src%2Fapp%2Fcities-nav.component.ts