Angular2: Изменение мета тайтла страницы и роутер

Когда мы разрабатываем приложение — то даже тривиальные задачи на новых движках могут быть неоднозначны, поэтому продолжаем наши игры с ангуляром. Я люблю чтобы сайты были «цельными» и каждая кнопочка меняла вид и что-то реальное делала, ну а изменение заголовков страницы при переходе на новый раздел — это уже «правило этикета» много лет.

Наивный подход

В главном компоненте введем переменную, и будем ее менять — хорошо все, до момента когда пользователь входит не с главной страницы (т.е. например с контактов — а тайтл то не изменен с дефолтного, клика ведь не было)

setTitle(title) {
	this.title = title;
}
<h1>{{title}}</h1>
<ul>
<li><a [routerLink]="['/data']" routerLinkActive="active" (click)="setTitle('Data')">{{ 'Data' }}</a></li>
<li><a [routerLink]="['/contacts']" routerLinkActive="active" (click)="setTitle('Contacts')">{{ 'Contacts' }}</a></li>
</ul>

Передача данных между контроллерами

В начале в дочернем контроллере определим что мы изменили тайтл (ну и что еще захотим подвязать под его открытие, например метазаголовок), а сделаем мы это через внешний сервис.

import { Component } from '@angular/core';
import { AppComponentTitleService } from  '../app/app.component.title.service';
 
 
@Component({
	templateUrl : 'contacts.component.html'
})
 
class ContactsComponent {
 
	private title:string = 'Contacts';
 
	public constructor(private appTitleService: AppComponentTitleService) {
 
	}
 
	ngOnInit() {
		this.appTitleService.setTitle(this.title);
	}
}
export {ContactsComponent};

Внешний сервис — место хранения переменной (чтобы еще немножко полезного — сразу посмотрите на установку мета заголовка через Title из пакета ‘@angular/platform-browser’)

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
 
import { Subject } from 'rxjs/Subject';
 
@Injectable() class AppComponentTitleService {
	public currentTitle: Subject<any>=new Subject();
 
	constructor(private titleService: Title) {
		this.loaded = new Array();
	}
 
 
	public _setTitle(title) {
		this.currentTitle.next(title);
		this.titleService.setTitle(title);
	}
}
export {AppComponentTitleService};

Главный компонент и подписка на изменения

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { AppComponentTitleService } from  '../app/app.component.title.service';
 
 
@Component({
	selector: 'my-app',
	templateUrl : 'app/app.component.html',
	directives: [ROUTER_DIRECTIVES],
	providers: [AppComponentTitleService]
})
 
class AppComponent {
	public title: string = 'Some title';
 
	constructor(private appTitleService: AppComponentTitleService) {
		appTitleService.currentTitle.subscribe(h1Title=>this.title=h1Title);
	}
}
export {AppComponent};
<h1>{{title}}</h1>
<ul>
<li><a [routerLink]="['/data']" routerLinkActive="active">{{ 'Data' }}</a></li>
<li><a [routerLink]="['/contacts']" routerLinkActive="active">{{ 'Contacts' }}</a></li>
</ul>

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">