반응형
angular2 라우터에서 페이지 제목을 변경하는 방법
라우터에서 페이지 제목을 변경하려고합니다.이 작업을 수행 할 수 있습니까?
import {RouteConfig} from 'angular2/router';
@RouteConfig([
{path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {}
Title서비스 @EricMartinez는 지적 이 setTitle()방법을 - 당신이 제목을 설정하는 데 필요한 모든 있다고.
경로 변경시 자동으로 수행하는 측면에서 현재 콜백을 구독 Router하고 호출 setTitle()하는 것 외에이 작업을 수행하는 기본 제공 방법은 없습니다 .
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));
});
}
}
즉, 라우터가 아직 많이 개발 중이기 때문에 현재 강조 하고RouteConfig 있으며 최종 릴리스에서 이를 통해이 작업을 수행 할 수 있기를 기대합니다 (최소한 희망) .
편집하다:
Angular 2 (2.0.0) 출시 이후 몇 가지 사항이 변경되었습니다.
Title서비스 문서 는 이제 https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html에 있습니다.- 서비스 가져 오기
'@angular/platform-browser'
특히 중첩 된 경로에 대해 잘 작동하는 내 접근 방식은 다음과 같습니다.
재귀 도우미 메서드를 사용하여 경로가 변경된 후 사용 가능한 가장 깊은 제목을 가져옵니다.
@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;
}
}
다음과 같이 경로의 데이터 속성 내에 페이지 제목을 할당했다고 가정합니다.
{
path: 'example',
component: ExampleComponent,
data: {
title: 'Some Page'
}
}
Angular 4+의 경우 :
경로 사용자 지정 데이터를 사용하여 모든 경로 경로에 대한 페이지 제목을 정의하려는 경우 다음 접근 방식이 중첩 된 경로 및 각도 버전 4+에서 작동합니다.
경로 정의에 페이지 제목을 전달할 수 있습니다.
{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'}},
이제 상위 수준 구성 요소 (예 :)에서 가장 중요한 것은AppComponent 모든 경로 변경에서 경로 사용자 지정 데이터를 전역 적으로 포착하고 페이지 제목을 업데이트 할 수 있다는 것입니다.
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);
});
}
}
위 코드는 앵귤러 버전 4+에 대해 테스트되었습니다.
이 작업을 수행하는 것은 매우 쉽습니다. 다음 단계에 따라 즉각적인 효과를 확인할 수 있습니다.
우리는 부트 스트랩에서 Title 서비스를 제공합니다 :
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 { }
그런 다음 원하는 구성 요소에서이 서비스를 가져옵니다.
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 );
}
}
이제 해당 링크를 클릭하여 제목 변경을 확인하십시오.
ng2-meta를 사용하여 페이지 제목과 설명을 변경할 수도 있습니다.이 링크를 참조 할 수 있습니다.
https://github.com/vinaygopinath/ng2-meta
Angular 2는 제목 서비스를 제공합니다. Shailesh 답변은 해당 코드의 사본 일뿐입니다.
나는 우리의 app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
........
providers: [..., Title],
bootstrap: [AppComponent]
이제 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 );
}
}
구성 요소 html에 제목 태그를 넣으면 읽고 설정됩니다.
동적으로 설정하는 방법과 자세한 내용은이 기사를 참조하십시오.
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');
}
}
이것은 내가 함께 갔던 것입니다.
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;
}
아래 예에서 :
-데이터 개체 : {title : 'NAME'}을 라우팅 개체에 추가했습니다.
-업로드 시간에 대한 기본 이름 ( "CTM")을 설정합니다 (Refreash를 위해 F5를 클릭 할 때 ..) : <title>CTM</title>.
- "TitleService"클래스를 추가했습니다.
-app.component.ts에서 필터링하여 Routher 이벤트를 처리합니다.
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);
});
}
}
다음은 페이지 / 뷰를 탐색 할 때 페이지 제목을 변경하는 가장 간단한 방법입니다 (Angular @ 2.3.1 기준으로 테스트 됨). 가지고있는 모든 뷰에 다음 솔루션을 적용하기 만하면됩니다.
회사 소개 페이지 /보기의 예제 코드 :
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');
}
}
문의하기 페이지 /보기의 예제 코드 :
import {Title} from "@angular/platform-browser";
export class ContactusComponent implements OnInit {
constructor(private _titleService: Title) {
}
ngOnInit() {
//Set page Title
this._titleService.setTitle('Contact Us');
}
}
Angular 6+ new Pipe ()를 사용하여 이전 코드를 수정하고 정상적으로 작동합니다.
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 및 6+에서 잘 작동합니다.
Step1: routing setup
{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'}},
step2: in your app.module.ts import module
import { BrowserModule, Title } from '@angular/platform-browser';
then in provider add providers: [title]
Step 3 In your main component import
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);
});
}
I can also recommend @ngx-meta/core plugin plugin that I've just released, in the case if you're looking for a method to set page title and meta tags dynamically.
Angular 6+
if route configured as follow :-
Routes = [
{ path: 'dashboard',
component: DashboardComponent,
data: {title: 'Dashboard'}
}]
**Then in component constructor title can be set as follow :- **
constructor( private _titleService: Title, public activatedRoute: ActivatedRoute) {
activatedRoute.data.pipe(map(data => data.title)).subscribe(x => this._titleService.setTitle(x));
}
ReferenceURL : https://stackoverflow.com/questions/34602806/how-to-change-page-title-in-angular2-router
반응형
'programing' 카테고리의 다른 글
| JavaScript에서 ""== [null]이 true 인 이유는 무엇입니까? (0) | 2021.01.13 |
|---|---|
| PACKETS와 FRAMES의 차이점 (0) | 2021.01.13 |
| Spring Boot Rest 서비스에서 파일 다운로드 (0) | 2021.01.13 |
| Typescript가 이름 창 또는 문서를 찾을 수 없습니다. (0) | 2021.01.13 |
| Nginx 프록시 Amazon S3 리소스 (0) | 2021.01.13 |