Обмен данными между угловыми компонентами

Question

Я новичок в Angular 6. Я создаю проект с использованием Angular 6. У меня возникла проблема при обмене данными.Вот структура проекта:

1) Компонент входа в систему заголовка 2 3) Домашний компонент 4) Общая служба

Я добавляю класс в свой компонент заголовка на основе текущего маршрута.Это работало над обновлением страницы.Но когда я переходил от одного компонента к другому, это не работало.

Вот код:

Компонент макета:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>

Компонент заголовка:

 ngOnInit() {
    console.log(this.dataService.urlExists())
    if(this.dataService.urlExists()){
      this.url = true
     }else{
       this.url = false
     };

  }
<header class="stick-top forsticky" id="header" [ngClass]="{'gradient': url==true}">
</header>

Общая служба:

urlExists(){
     this.url = this.router.url
     if(this.url == "/"){
         return false;
     }else{
         return true;
     }
 }

Обратите внимание: при обновлении страницы это работает ..

Answer 1

Это потому, что ваш компонент заголовка не переинициализируется при навигации, так как он находится за пределами router-outlet. Вам необходимо прослушать изменения маршрута и соответственно выполнить нужные операции.

Таким образом, в компоненте заголовка вы можете подписаться на события маршрутизатора и прослушивать NavigationEnd события для проверки URL:

import {NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators';
...



constructor(private router: Router) {
    this.subscribeRouterEvents();

}

subscribeRouterEvents = () => {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd)
    ).subscribe(() => {
       console.log(this.dataService.urlExists())
       if(this.dataService.urlExists()){
          this.url = true
       }else{
          this.url = false
       };
    });