Блог

Я новичок в 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;
     }
 }
  

Пожалуйста, обратите внимание: при обновлении страницы это работает..

Это потому, что ваш компонент заголовка не запускается повторно при навигации, поскольку он находится за пределами 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
       };
    });