Hello.

I need to, depending on the "URI in the browser," the look of the page header changes.

I created a service and in it I managed to “meet” the current route, but this only worked when the page was directly reloaded in the browser. The app.module.ts service has been added to the providers section.

Kick me in the right direction. So far, I'm just learning Angular 7 and I'm completely confused with subscriptions, providers, and the links between them.

Spread the code that I have now.

Service view.service.ts

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ViewService { isIndex: boolean = true; constructor() { } }

App-routing.module.ts module

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './components/pages/about/about.component'; import { DeliveryComponent } from './components/pages/delivery/delivery.component'; import { ReviewsComponent } from './components/pages/reviews/reviews.component'; import { UserareaComponent } from './components/pages/userarea/userarea.component'; import { IndexComponent } from './components/pages/index/index.component'; import { P404Component } from './components/pages/p404/p404.component'; const routes: Routes = [ { path: 'about', component: AboutComponent }, { path: 'delivery', component: DeliveryComponent }, { path: 'reviews', component: ReviewsComponent }, { path: 'userarea', component: UserareaComponent }, { path: '', component: IndexComponent }, { path: '**', component: P404Component } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

The HeaderComponent component (embedded in the app-component):

 import { Component, OnInit } from '@angular/core'; import { ViewService } from '../../../services/view.service'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], providers: [] }) export class HeaderComponent implements OnInit { constructor(private vs: ViewService) { } isIndex = this.vs.isIndex; ngOnInit() { } }

HeaderComponent component template:

 <!-- Index Header --> <ng-template [ngIf]="this.isIndex"> <div class="index-top"> Header for Index Page </div> </ng-template> <!-- Inner Header --> <ng-template [ngIf]="!this.isIndex"> <div class="inner-top"> Header for Inner Page </div> </ng-template>

  • Как подписаться на изменение маршрута? - Router.prototype.events.subscribe(...) - overthesanity

0