同一组件中的不同参数第二次不起作用

Question

我有一个带有多个菜单选项的导航栏组件。我计划根据查询参数值加载单个组件中的所有菜单内容。但它只是第一次工作。从第二次点击开始不工作。尽管路线的 URL 事件正在改变，但视图并未改变。

我的导航栏html代码：


<div class="row">
    <div class=" bg-dark navbar-Light column text-center" style="width: 200PX " >
        <div class="nav-item " >
            <a class="nav-link" href="#" style="color: white" routerLink="cricket" (click)="Navigateurl($event, 'cricket')" [queryParams]="{game:'cricket'}">
                <i class='fas fa-skating' style='font-size:30px;color:red'></i>Cricket</a>
            </div>
            <div class="nav-item">
                <a class="nav-link" href="#" style="color: white" routerLink="cricket"  (click)="Navigateurl($event, 'football')" [queryParams]="{game:'football'}">
                    <i class='fas fa-football-ball' style='font-size:30px;color:red'></i> Football</a>
                </div>
            <div class="nav-item">
                <a class="nav-link" href="#" style="color: white" routerLink="cricket" (click)="Navigateurl($event, 'bikerace')" [queryParams]="{game:'bikerace'}">
                <i class="fas fa-biking"style='font-size:30px;color:red'></i>BikeRace </a>
            </div>
            <div class="nav-item">
                <a class="nav-link" href="#" style="color: white" routerLink="cricket" (click)="Navigateurl($event, 'basketball')" [queryParams]="{game:'basketball'}">
                <i class='fas fa-basketball-ball' style='font-size:30px;color:red'></i>Basketball </a>
            </div></div><div class="column" style="width: 85%">
            </div> 
        </div>

Mycomponent.ts 文件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-cricket',
  templateUrl: './cricket.component.html',
  styleUrls: ['./cricket.component.css']
})
export class CricketComponent implements OnInit {
  public selectedgame? : string;
  paramsObject? : any;


  constructor(public route: ActivatedRoute) {

    this.route.queryParamMap
    .subscribe((params) => {
      this.paramsObject = { ...params.keys, ...params };
    }
  );
  debugger;
  var x = this.paramsObject;
  this.selectedgame = x.params["game"];
  console.log(this.selectedgame + " Hello..");
   }

  ngOnInit(): void {
   alert(this.selectedgame);  // Not working from second time.
  }

}

我的组件的 html 文件：

<div>
    <div *ngIf='selectedgame == "cricket"'>Cricket Div</div>
    <div *ngIf='selectedgame == "football"'>Football Div</div>
    <div *ngIf='selectedgame == "bikerace"'>Bikerace Div</div>
    <div *ngIf='selectedgame == "basketball"'>BasketBall Div</div>

    {{selectedgame}}  // Not changing from second time
</div>

Answer 1

尝试将您的分配放入订阅处理程序中：

  constructor(public route: ActivatedRoute) {

    this.route.queryParamMap
    .subscribe((params) => {
      this.paramsObject = { ...params.keys, ...params };
      debugger;
      var x = this.paramsObject;
      this.selectedgame = x.params["game"];
      console.log(this.selectedgame + " Hello..");
    });
 }

同一组件中的不同参数第二次不起作用

Different parameter within same component not working from second time

angular

routes

angular-ui-router