Как заставить Angular перезагрузить ту же страницу, но с другим аргументом? - PullRequest
2 голосов
/ 07 июля 2019

У меня есть один угловой компонент, ProductComponent.Основываясь на ссылке, которая выбрана, как показано в навигационных ссылках ниже, я хочу, чтобы тот же ProductComponent был перезагружен, но с другим параметром.Например, [routerLink] = "['/ product', 'chicken']" должен загружать страницу продукта, но в качестве продукта используется курица.

<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'chicken']">
    Chicken<br>
</a>
</li>
<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'salads']">
        Salads<br>
    </a>
</li>
<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'sides']">
    Sides<br>
    </a>
</li>

Проблема заключается в том, что я уже нахожусь наСтраница продукта, Angular не перезагружает страницу при нажатии на ссылку, потому что, несмотря на различные параметры, он видит страницу / product, как уже загруженную, и не перезагружает ее.Как мне это решить.

Ответы [ 3 ]

0 голосов
/ 07 июля 2019

Вы можете подписаться на params in ActivatedRoute, чтобы получить параметры маршрута из URL, а затем вызвать вашу функцию для загрузки представления.

export class ProductComponent implements OnInit {

  public product :any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(){
    this.route.params.subscribe((param:Params) => {
       this.product = params['product']; // where product the key defined in route
       // Then call function to update view with new params product
    });
  }
} 
0 голосов
/ 07 июля 2019

Вы можете сделать это, подписавшись на изменения в параметрах вашего маршрута. Вы можете использовать наблюдаемые в ActivatedRoute.

import { ActivatedRoute } from '@angular/router';
...

export class ProductComponent implements OnInit {
  public product: any;
  constructor (
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.product = params['product'];  // If your route path is 'product/:product'
      // Do something with the new route params. (Eg. Update component state, etc.)
    }
  }
}

0 голосов
/ 07 июля 2019

Решение (любезно предоставлено Михаилом С.) состоит в том, чтобы заставить маршрутизатор поверить, что его последняя ссылка не была загружена.

export class ProductComponent implements OnInit {

  constructor(
    private router: Router
  ) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => {
      return false;
    }

    this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationEnd) {
        this.router.navigated = false;
      }
    });
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...