我试图从路由器更改页面标题,这可以做到吗？
import {RouteConfig} from 'angular2/router';
@RouteConfig([
{path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {}
drew moore.. 56
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'
`router.subscribe`现在也是Angular2中的`router.events.subscribe` (3认同)
Martin Creme.. 15
这是我的方法,它工作正常,特别是对于嵌套路由:
我使用递归辅助方法在路由更改后获取最深的可用标题:
@Component({
selector: 'app',
template: `
{{title | async}}
;
private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
var title = routeSnapshot.data ? routeSnapshot.data['title'] : '';
if (routeSnapshot.firstChild) {
title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
}
return title;
}
}
这是假设您已在路径的data属性中分配了页面标题,如下所示:
{
path: 'example',
component: ExampleComponent,
data: {
title: 'Some Page'
}
}
asmmahmud.. 13
对于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@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: `
{{title | async}}
;
private getDeepestTitle(routeSnapshot: ActivatedRouteSnapshot) {
var title = routeSnapshot.data ? routeSnapshot.data['title'] : '';
if (routeSnapshot.firstChild) {
title = this.getDeepestTitle(routeSnapshot.firstChild) || title;
}
return title;
}
}
这是假设您已在路径的data属性中分配了页面标题,如下所示:
{
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+进行测试.
它真的很容易做到这一点,您可以按照以下步骤查看即时效果:
我们在bootstrap中提供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:
`
Select a title to set on the current HTML document:
`
})
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上,它将为您读取和设置.
如果您想知道如何动态设置它,请参阅本文
京公网安备 11010802040832号 | 京ICP备19059560号-6 