typescript - page - dynamic title angular 5
cómo cambiar el título de la página en el enrutador angular2 (13)
Angular 2 proporciona un angular.io/docs/ts/latest/cookbook/set-document-title.html respuesta de Shailesh es solo una copia de ese código.
Yo nuestra app.module.ts
import { BrowserModule, Title } from ''@angular/platform-browser'';
........
providers: [..., Title],
bootstrap: [AppComponent]
Ahora muévase a nuestra app.component.ts
import { Title } from ''@angular/platform-browser'';
......
export class AppComponent {
public constructor(private titleService: Title ) { }
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
Coloque la etiqueta de título en su componente html y se leerá y configurará para usted.
Si desea saber cómo configurarlo dinámicamente y más detalles, vea este artículo
Estoy tratando de cambiar el título de la página desde el enrutador, ¿se puede hacer esto?
import {RouteConfig} from ''angular2/router'';
@RouteConfig([
{path: ''/home'', component: HomeCmp, name: ''HomeCmp'' }
])
class MyApp {}
Aquí está mi enfoque que funciona bien, especialmente para rutas anidadas:
Utilizo un método de ayuda recursivo para obtener el título más profundo disponible después de que una ruta ha cambiado:
@Component({
selector: ''app'',
template: `
<h1>{{title | async}}</h1>
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(private router: Router) {
this.title = this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.getDeepestTitle(this.router.routerState.snapshot.root));
}
title: Observable<string>;
private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
var title = routeSnapshot.data ? routeSnapshot.data[''title''] : '''';
if (routeSnapshot.firstChild) {
title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
}
return title;
}
}
Esto supone que ha asignado títulos de página dentro de la propiedad de datos de sus rutas, de esta manera:
{
path: ''example'',
component: ExampleComponent,
data: {
title: ''Some Page''
}
}
El
angular.io/docs/ts/latest/api/platform-browser/index/…
tiene un método
setTitle()
: eso es todo lo que necesita para configurar el título.
En términos de hacerlo automáticamente en los cambios de ruta, a
partir de ahora
no hay una forma integrada de hacerlo que no sea suscribirse al
Router
y llamar a
setTitle()
en su devolución de llamada:
import {RouteConfig} from ''angular2/router'';
import {Title} from ''angular2/platform/browser'';
@RouteConfig([
{path: ''/home'', component: HomeCmp, name: ''HomeCmp'' }
])
class MyApp {
constructor(router:Router, title:Title) {
router.events.subscribe((event)=>{ //fires on every URL change
title.setTitle(getTitleFor(router.url));
});
}
}
Dicho esto, enfatizo a
partir de ahora
porque el enrutador aún está en desarrollo, y espero (o al menos espero) que podamos hacerlo a través de
RouteConfig
en la versión final.
EDITAR:
A partir del lanzamiento de Angular 2 (2.0.0), algunas cosas han cambiado:
-
Los documentos para el servicio de
Titleahora están aquí: angular.io/docs/ts/latest/api/platform-browser/index/… -
El servicio se importa desde
''@angular/platform-browser''
En el siguiente ejemplo:
-Añadimos objeto de datos: {título: ''NOMBRE''} a cualquier objeto de enrutamiento.
-Configuramos un nombre básico ("CTM") para el tiempo de carga (al hacer clic en F5 para Refreash ..):
<title>CTM</title>
.
-Añadimos la clase "TitleService".
- manejamos los eventos de Routher filtrándolos desde app.component.ts.
index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>CTM</title>
</head>
...
app.module.ts:
import { NgModule, enableProdMode } from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { TitleService } from ''./shared/title.service'';
...
@NgModule({
imports: [
BrowserModule,
..
],
declarations: [
AppComponent,
...
],
providers: [
TitleService,
...
],
bootstrap: [AppComponent],
})
export class AppModule { }
enableProdMode();
title.service.ts:
import { Injectable } from ''@angular/core'';
import { Title } from ''@angular/platform-browser'';
import { ActivatedRouteSnapshot } from ''@angular/router'';
@Injectable()
export class TitleService extends Title {
constructor() {
super();
}
private recursivelyGenerateTitle(snapshot: ActivatedRouteSnapshot) {
var titleParts = <string[]>[];
if (snapshot) {
if (snapshot.firstChild) {
titleParts = this.recursivelyGenerateTitle(snapshot.firstChild);
}
if (snapshot.data[''title'']) {
titleParts.push(snapshot.data[''title'']);
}
}
return titleParts;
}
public CTMGenerateTitle(snapshot: ActivatedRouteSnapshot) {
this.setTitle("CTM | " + this.recursivelyGenerateTitle(snapshot).join('' - ''));
}
}
app-routing.module.ts:
import { Injectable } from ''@angular/core'';
import { NgModule } from ''@angular/core'';
import { Routes, RouterModule } from ''@angular/router'';
import { MainComponent } from ''./components/main.component'';
import { Router, CanActivate } from ''@angular/router'';
import { AuthGuard } from ''./shared/auth/auth-guard.service'';
import { AuthService } from ''./shared/auth/auth.service'';
export const routes: Routes = [
{ path: ''dashboard'', component: MainComponent, canActivate: [AuthGuard], data: { title: ''Main'' } },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
],
exports: [RouterModule],
providers: [
..
]
})
export class AppRoutingModule { }
export const componentsOfAppRoutingModule = [MainComponent];
app.component.ts:
import { Component } from ''@angular/core'';
import { Router, NavigationEnd, ActivatedRouteSnapshot } from ''@angular/router'';
import { TitleService } from ''./shared/title.service'';
@Component({
selector: ''ctm-app'',
template: `
<!--<a [routerLink]="[''/dashboard'']">Dashboard</a>
<a [routerLink]="[''/login'']">Login</a>
<a [routerLink]="[''/'']">Rooting</a>-->
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(private router: Router, private titleService: TitleService) {
this.router.events.filter((event) => event instanceof NavigationEnd).subscribe((event) => {
console.log("AppComponent.constructor: Setting HTML document''s Title");
this.titleService.CTMGenerateTitle(this.router.routerState.snapshot.root);
});
}
}
Es realmente muy fácil hacer esto, puede seguir estos pasos para ver los efectos inmediatos:
Proporcionamos el servicio de Título en bootstrap:
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 { }
Luego importe este servicio en el componente que desee:
import { Component } from ''@angular/core'';
import { Title } from ''@angular/platform-browser'';
@Component({
selector: ''my-app'',
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 );
}
}
ahora haga clic en esos enlaces para ver el cambio de título.
también puede usar ng2-meta para cambiar el título y la descripción de la página, puede consultar este enlace:
Esta es la forma más sencilla de cambiar el Título de la página, cuando se navegan las páginas / vistas (Probado desde Angular @ 2.3.1). Simplemente aplique la siguiente solución a todas las vistas que tenga y debería estar listo:
Código de ejemplo en la página / vista Acerca de nosotros:
import {Title} from "@angular/platform-browser";
export class AboutUsComponent implements OnInit {
constructor(private _titleService: Title) {
}
ngOnInit() {
//Set page Title when this view is initialized
this._titleService.setTitle(''About Us'');
}
}
Código de ejemplo en la página / vista Contáctenos:
import {Title} from "@angular/platform-browser";
export class ContactusComponent implements OnInit {
constructor(private _titleService: Title) {
}
ngOnInit() {
//Set page Title
this._titleService.setTitle(''Contact Us'');
}
}
Esto es con lo que fui:
constructor(private router: Router, private title: Title) { }
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.title.setTitle(this.recursivelyGenerateTitle(this.router.routerState.snapshot.root).join('' - ''));
}
});
}
recursivelyGenerateTitle(snapshot: ActivatedRouteSnapshot) {
var titleParts = <string[]>[];
if (snapshot) {
if (snapshot.firstChild) {
titleParts = titleParts.concat(this.recursivelyGenerateTitle(snapshot.firstChild));
}
if (snapshot.data[''title'']) {
titleParts.push(snapshot.data[''title'']);
}
}
return titleParts;
}
También puedo recomendar el complemento plugin @ngx-meta/core que acabo de lanzar, en el caso de que esté buscando un método para establecer dinámicamente el título de la página y las metaetiquetas.
Angular 6+ Modifiqué el código anterior usando el nuevo Pipe () y está funcionando bien.
import { Title } from ''@angular/platform-browser'';
import { filter, map, mergeMap } from ''rxjs/operators'';
...
constructor(
private router: Router,
public activatedRoute: ActivatedRoute,
public titleService: Title,
) {
this.setTitle();
}
....
setTitle() {
this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map((route: any) => {
while (route.firstChild) route = route.firstChild;
return route;
}),
filter((route) => route.outlet === ''primary''),
mergeMap((route: any) => route.data)).subscribe((event) => {
this.titleService.setTitle(event[''title'']);
console.log(''Page Title'', event[''title'']);
})
}
Angular 6+
si la ruta está configurada de la siguiente manera: -
Routes = [
{ path: ''dashboard'',
component: DashboardComponent,
data: {title: ''Dashboard''}
}]
** Luego, en el título del constructor de componentes se puede establecer de la siguiente manera:
constructor( private _titleService: Title, public activatedRoute: ActivatedRoute) {
activatedRoute.data.pipe(map(data => data.title)).subscribe(x => this._titleService.setTitle(x));
}
Funciona bien en Angular 6 y 6+ con el método Pipe y map en lugar de usar filtro
Paso 1 : configuración de enrutamiento
{path: ''dashboard'', component: DashboardComponent, data: {title: ''My Dashboard''}},
{path: ''aboutUs'', component: AboutUsComponent, data: {title: ''About Us''}},
{path: ''contactUs'', component: ContactUsComponent, data: {title: ''Contact Us Page''}},
Paso 2: en su módulo de importación app.module.ts
import { BrowserModule, Title } from ''@angular/platform-browser'';
luego en el proveedor agregue proveedores:
[title]
Paso 3 En la importación de su componente principal
import { Title } from "@angular/platform-browser";
import { RouterModule, ActivatedRoute, Router, NavigationEnd } from "@angular/router";
import { filter, map } from ''rxjs/operators'';
constructor(private titleService: Title, private router: Router, private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.router.events.pipe(map(() => {
let child = this.activatedRoute.firstChild;
while (child) {
if (child.firstChild) {
child = child.firstChild;
} else if (child.snapshot.data && child.snapshot.data[''title'']) {
return child.snapshot.data[''title''];
} else {
return null;
}
}
return null;
})).subscribe(title => {
this.titleService.setTitle(title);
});
}
Para Angular 4+:
Si desea utilizar datos personalizados de ruta para definir el título de la página para cada ruta de ruta, el siguiente enfoque funcionará para las rutas anidadas y con la versión angular 4+:
Puede pasar el título de la página en su definición de ruta:
{path: ''home'', component: DashboardComponent, data: {title: ''Home Pag''}},
{path: ''about'', component: AboutUsComponent, data: {title: ''About Us Page''}},
{path: ''contact'', component: ContactUsComponent, data: {title: ''Contact Us Pag''}},
Ahora, lo más importante
en su componente de nivel superior (es decir,
AppComponent
), puede capturar globalmente los datos personalizados de la ruta en cada cambio de ruta y actualizar el título de la página:
import {Title} from "@angular/platform-browser";
export class AppComponent implements OnInit {
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private titleService: Title
) { }
ngOnInit() {
this.router
.events
.filter(event => event instanceof NavigationEnd)
.map(() => {
let child = this.activatedRoute.firstChild;
while (child) {
if (child.firstChild) {
child = child.firstChild;
} else if (child.snapshot.data && child.snapshot.data[''title'']) {
return child.snapshot.data[''title''];
} else {
return null;
}
}
return null;
}).subscribe( (title: any) => {
this.titleService.setTitle(title);
});
}
}
El código anterior se prueba con la versión angular 4+.
import {Title} from "@angular/platform-browser";
@Component({
selector: ''app'',
templateUrl: ''./app.component.html'',
providers : [Title]
})
export class AppComponent implements {
constructor( private title: Title) {
this.title.setTitle(''page title changed'');
}
}