Question

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

目前，我仅在两个按钮（在citys-nav中）中实现了routerLink，同时对其进行了测试。我还在app-component.html中实现了一个临时菜单，以防万一这是“材质”菜单问题，但它也不起作用。控制台什么也没说。而且，在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 {}

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

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

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

第一个，我必须在citys-nav.component中更改此行：

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

收件人：

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

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

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

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

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

Answer 2

ngOnInit中的控制台日志仅被调用一次。如果要检测参数的变化，请在activateRoute中订阅paraMap。

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

Angular 7网址发生变化，但没有其他反应

2 个答案: