web-dev-qa-db-fra.com

Changer dynamiquement la chaîne d'en-tête dans angular 2

Dans mon application, je tente de modifier dynamiquement le titre de mon composant d’en-tête en fonction de la page sur laquelle je suis, de sorte que je souhaite utiliser 

<h1>{{title}}</h1>

et je veux que cela change en fonction de la page sur laquelle je suis. Maintenant, l'en-tête est corrigé, donc c'est sur chaque page

ci-dessous est une image de ce que im essayant de changer  enter image description here

Fondamentalement, si je suis sur la page d'accueil, je veux le dire à la maison, puis si je suis sur une page à propos, je veux qu'il change à propos de ..

Je ne sais pas comment je peux m'y prendre et tout ce que j'ai recherché a été de changer le titre dans les balises <head></head> 

javascriptangulartypescript
7
Smokey Dawson

Vous pouvez créer un service dédié à la mise à jour du titre dans votre composant d’en-tête. Il vous suffit d’injecter le service dans votre composant d’en-tête et de vous abonner à un BehaviorSubject dédié. Ensuite, vous pouvez injecter ce service dans n'importe quel composant et utiliser la méthode setTitle à partir de ce composant qui mettra à jour le titre dans le composant en-tête. Découvrez le code suivant

//headerTitle.service.ts
@Injectable()
export class headerTitleService {
  title = new BehaviorSubject('Initial Title');

  setTitle(title: string) {
    this.title.next(title);
  }
}

//header.component.ts
title = '';

constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.title.subscribe(updatedTitle => {
    this.title = updatedTitle;
  });
}

//header.component.html
<h1>{{title}}</h1>

//about.component.ts
constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.setTitle('About');
}

Démo de travail

13
Aamir Khan

Utilisez le service de titre dans @ angular/platform-browser et ajoutez un composant de routeur avec une propriété de données.

const appRoutes: Routes = [
  { path: 'home',component:HomeComponent , data:{title:'Home'}}

  ];

Appelez cette fonction dans le composant racine

ngOnInit() {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
  }
}
2
lokesh nagpal

utilisez le service de titre sur la plate-forme du navigateur pour changer le titre de manière dynamique. consultez ce lien pour plus d'informations

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, Title }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    Title
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

// Import the native Angular services.
import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';

@Component({
selector: 'app-root',
template:
  `<p>
    Select a title to set on the current HTML document:
  </p>

  <ul>
    <li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
    <li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
    <li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
  </ul>
  `
})
export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}
1
Prithivi Raj

Vous pouvez y parvenir en vous abonnant à Router events comme suit 

private setTitleFromRouteData(routeData) {
    if (routeData && routeData['title']) {
        this.pageTitle = routeData['title'];
    } else {
        this.pageTitle = 'No title';
    }
}

private getLatestChild(route) {
    while (route.firstChild) {
        route = route.firstChild;
    }
    return route;
}

private subscribeToRouteChangeEvents() {
    // Set initial title
    const latestRoute = this.getLatestChild(this.activeRoute);
    if (latestRoute) {
        this.setTitleFromRouteData(latestRoute.data.getValue());
    }
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.activeRoute),
        map((route) => this.getLatestChild(route)),
        filter((route) => route.outlet === 'primary'),
        mergeMap((route) => route.data),
    ).subscribe((event) => {
        this.setTitleFromRouteData(event);
    });
}

J'ai écrit un tutoriel complet sur ce sujet - https://medium.com/@CROSP/page-specific-dynamic-angular-components-using-child-routes-40f3cc47ce10

1
CROSP

Selon les exigences de OP, il semble que OP doit lier une propriété de chaîne à la page.

Dans votre composant ont une propriété. Puisque c'est une chaîne de réparation, vous pouvez l'initialiser sur chaque composant comme:

 public title:string = 'About me';

et dans votre HTML juste:

<h1>{{title}}</h1>

Mettre à jour:

Comme il doit être lié à un composant d'en-tête constant, vous devrez emit un événement de chaque composant à l'aide de EventEmitter et l'écouter dans plusieurs composants de votre application, puis mettre à jour la propriété title.

Comme suggéré par Aamir dans les commentaires: Vous pouvez avoir un service, dans lequel vous pouvez créer un observable puis mettre à jour sa valeur next dans chaque composant. L'observable peut ensuite être souscrit dans le composant header pour mettre à jour la propriété title.

0
Saurabh Tiwari