Как в Angular 4 поймать событие при переходе по routerLink?

Question

[igor456727]

Всем привет! Есть в приложении 2 компонента home & page, роутинг выглядит так

{
path : '',
component: HomeComponent
},
{
path : 'page',
component: PageComponent
},
{
path : 'page/:code',
component: PageComponent

},

Далее на любой странице у меня есть ссылки вида

< a routerLink="/page/{{ item_child.code }}" >{{ item_child.title }} a>

Если я нахожусь на странице компонента home то переход работает правильно - данные подтягиваются на странице компонента page, но если я сделал переход и текущий юрл = /page/code, то при клике по такому же юрл данные почему то не меняются, почему ? не запускается конструктор компонента page.

И еще подводный камень, так как я вывожу ссылке в другом компоненте ( назовем его компонент menu, то даже при вызове из него функции изменения к примеру тайтла компонента page, то же не меняет ).
Все это наблюдается при кликах непосредственно на странице /page/code.

Answer 1

[Алексей Рудьковский]

Можете привести код которым вы пробуете получить code в компоненте PageComponent?

В текущем проекте получаю данные следующим образом:

constructor(private activatedRoute: ActivatedRoute) {}

Далее в ngOnInit:

this.activatedRouter.params.subscribe(params => { ... })

Comments

[Алексей Рудьковский]

igor456727, вам нужно изменить процедуру получения переменной из адреса. Если не был изменён компонент, то конструктор и ngOnInit не вызываются повторно.
Что бы достичь желаемого результата, как я понимаю, вам нужно сделать следующее:
1) В конструктор добавить private activatedRoute: ActivatedRoute что бы получилось что-то такое:

constructor(public meta : Meta, public  title: Title, private http: Http, private router: Router, private activatedRoute: ActivatedRoute)

Добавив private вы автоматически создаёте поле класса с таким же именем и типом.
2) Советую убрать код из конструктора и поместить его в новую функцию, например loadData(code)
3) Как я уже писал ранее, код в конструкторе и ngOnInit не срабатывает дважды находясь в одном компоненте. Что бы отследить изменение адреса я использую activatedRoute. Для в начале метода ngOnInit:

this.activatedRoute.params.subscribe(variables=> this.loadData(variables.code));

В переменной variables будут те переменные, которые вы указываете в правилах маршрутизации(в вашем случае: path : 'page/:code',)

В функцию loadData уже будет отправлен код, полученный из адреса, поэтому получать его заново строчками

this.urlar = location.href.split('/')

      this.code = this.urlar[this.urlar.length-1]

не нужно

[igor456727]

Спасибо !

Answer 2

[igor456727]

Проблема выявилась в том, что если компонент меню ( с ссылками ) выводится в компоненте page = то работает хорошо. Если выводится в основном компоненте app.components.html

<div id="wrapper">

    <router-outlet></router-outlet>

    <app-menu></app-menu>
</div>

то наблюдается ошибка описанная выше, дело оказывается в этом, но как быть если хочется сохранить структуру и выводить меню в app.components.html и сделать переходы рабочими ?

Comments

[igor456727]

Исходный код компонента page

import { Component, OnInit } from '@angular/core';
import { RouterModule, Router, ActivatedRoute, RoutesRecognized } from '@angular/router';
import { Http, RequestOptions, Headers } from "@angular/http";
import "rxjs/add/operator/map";
import { Meta, Title } from '@angular/platform-browser';

declare var jQuery:any;



@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit  {
    public code = '';
    public urlar = [];
    public data = [];
    public keywords = '';
    public description = '';
  constructor(public meta : Meta, public  title: Title, private http: Http, private router: Router) {
      router.events.subscribe((val) => {

          window.scrollTo(0, 0);
      });

      this.urlar = location.href.split('/')

      this.code = this.urlar[this.urlar.length-1]

      let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
      let url = ''
      this.http.post(url, {code: this.code}, { headers: headers })
          .map(
          (response) => response.json()
      ).subscribe(data => {
           this.data = data

           if(data != null )
           {

           this.keywords = data.keywords
           this.description = data.description

           title.setTitle(data.title)

           meta.addTags(
                  [
                      {
                          name : 'keywords', content : this.keywords
                      },
                      {
                          name : 'description', content : this.description
                      }
                  ]
              )
           }
           });










  }

   
  ngOnInit( ) {

  }

}