Angular | Маршрутизатор не будет перенаправлять - PullRequest
Новая
       4

Angular | Маршрутизатор не будет перенаправлять

0 голосов
/ 13 марта 2020

Я реализовал следующий код для перенаправления на мои тепличные растения 

    <div *ngFor="let plant of plants" (click)="openPlant(plant)">
        <div class="row">
            <div class="col-md-3 p-l-0 p-r-0 my-auto">
                <img src="..." class="navbar-item-icon">
            </div>
            <div class="col-md-9 my-auto">
                {{plant.englishName}}
            </div>
        </div>
    </div>

(щелкните) openPlant: 

  public openPlant(plant: PlantModel) {
    var foundPoor = this.checkIfPlantIsPoor(plant),
    this._generalService.openPlant(foundPoor, plant)
  }

_generalService openPlant: 

  public openPlant(foundPoor, plant: PlantModel) {
    if (foundPoor) {
        ...
    } else {
        this.router.navigate(['desktop/plant/' + plant.id]);
    }
  }

Поэтому, когда я нажимаю на растение, оно будет перенаправлено очень хорошо. Но после перенаправления на первый завод, когда я нажимаю на другие, URL-адрес в браузере изменяется, но он не будет перенаправлять на фактический маршрут! Он просто остается на первом заводе, на котором я нажал.

Итак, в первый раз он переходит на http://localhost: 4200 / desktop / plant / 2 , затем я нажимаю, чтобы перенаправить на http://localhost: 4200 / рабочий стол / обрезка / 11 , URL-адрес в браузере изменяется на http://localhost: 4200 / рабочий стол / обрезка / 11 , но пользовательский интерфейс остается на http://localhost: 4200 / рабочий стол / завод / 2

Вот мой app.routing 

const routes: Routes = [
  ...
  { path: 'desktop', loadChildren: () => import('./pages/desktop/desktop.module').then(m => m.DesktopModule) },
  ...
];

Вот desktop.routing: 

const routes: Routes = [
  ...
  { path: 'plant/:id', component: PlantComponent},
  ...
];

Вот PlantComponent:

HTML

<div class="container">
    <plant-item [plantID]=plantID></crop>
</div>

TS 

  ngOnInit() {
    console.log(this.plantID)
    var _this = this
    var route = this.router.url
    this.plantID = this.activated_route.snapshot.paramMap.get("id")
  }

Вот PlantItemComponent TS: 

    ...
    this._plantService.currentPlants.subscribe(res => {
      this.activeSeed = this._plantsService.getMyActiveSeed(res, this.plantID)
      ...      
    })

на ngOnInit, который будет консоль. войти только в первый раз, когда я перехожу на первый завод. Когда я нажимаю, чтобы перейти к другим, это не будет console.log.

Вот стекаблик, фокусирующийся на маршрутизации и способах вызова необходимых компонентов: https://stackblitz.com/edit/angular-c9g1hl

1 Ответ

1 голос
/ 15 марта 2020

Проблема здесь в том, что при переходе к одному и тому же маршруту, даже с другим параметром, Angular повторно использует экземпляр компонента. Это означает, что ваша ngOnInit функция вызывается только один раз. Я думаю, что самый простой способ решить эту проблему - обработать ActivatedRoute как наблюдаемое: 

ngOnInit() {
  console.log(this.plantID)
  var _this = this
  var route = this.router.url

  this.activated_route.params.subscribe(params => {
    this.plantID = params.id;
  });
}
...