Wie kann man in Angular die Überschrift einer Seite ändern, die im Tab des Browsers angezeigt wird?
Lösung:
Mit this.titleService.setTitle in der component.ts Datei
Im Header der component.ts Datei muss man @angular/platform-browser einbinden
import { Title } from '@angular/platform-browser'; |
Dann kann man mit setTitle den Title ändern
this.titleService.setTitle("My Title");
|
Code-Component.component.ts
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { merge, of as observableOf } from 'rxjs'; import { catchError, startWith, switchMap } from 'rxjs/operators'; import { Title } from '@angular/platform-browser';
import { ArticleModel } from '../models/articles.model'; import { ArticleDataService } from "../serives/articles.service";
@Component({ selector: 'app-read-article', templateUrl: './read-article.component.html', styleUrls: ['./read-article.component.css'] }) export class ReadArticleComponent implements OnInit {
constructor( public dataService: ArticleDataService, private route: ActivatedRoute, //*get ID private titleService:Title, //*set page title ) { }
//< variables > public resultsLength = 0; public isLoadingResults = false; public isHttpError = false; public sError_Message = "Web Data error or http request error"; //</ variables >
//--< mapping >-- id: number; //*map to idtimeRecord iduser: String; article: ArticleModel; dtEdit: Date; //--</ mapping >--
ngOnInit() { //--------< ngOnInit() >-------- this.route.params.subscribe(params => { //< get ID > //*get ID from URL like timerecords/1 this.id = +params['id']; // (+) converts string 'id' to a number console.log(this.id); //</ get ID >
if (this.id > 0) { //< get Dataset > this.load_DataSource(); //</ get Dataset > } else { //< new > //*empty fields //</ new > }
});
//--------</ ngOnInit() >-------- }
//#region //====< functions >==== load_DataSource() { //--------< load_DataSource() >-------- //< check > if (this.id == 0) return; //</ check >
this.isLoadingResults = true; merge() .pipe( startWith({}), switchMap(() => { this.isLoadingResults = true; return this.dataService.get_Dataset(this.id) }), catchError(() => { this.isLoadingResults = true; this.isHttpError = true; return observableOf([]); }) ).subscribe(response => { //--< async response >-- this.article = response as ArticleModel
//console.log("response=" + response.toString()); this.map_Data(); //*map json to local variables this.init_Data(); //*set title //--</ async response >-- }
); //--------</ load_DataSource() >-------- }
map_Data() { //--------< map_Data() >-------- //*map Recordset to local variables console.log("id=" + this.id); this.dtEdit = new Date(this.article.dtedit);
//< convert iso Date > //*convert Iso-Date-Time to Javascript Date: 2021-01-20T08:00:00 //this.sDateEdit = this.get_Date_String_from_Date(this.dtEdit); //</ convert iso Date >
//--------</ map_Data() >-------- }
init_Data() { //--------< init_Data() >-------- this.titleService.setTitle("👁 " + this.article?.title); //--------</ init_Data() >-------- }
} |