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
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>
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');
}
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']));
}
}
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 );
}
}
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
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
.