Angular 2 通过服务更改页面标题
Angular 2 change page title through service
我有一个通过服务加载内容的页面组件。页面标题当前在 ngOnInit 中设置,但我想更改它以使用通过服务接收的数据设置页面标题。服务收到的 JSON 有一个 "title" 字段,其中包含页面标题的字符串。
现在代码如下所示:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { GetPageService } from '../shared/get-page/get-page.service';
@Component({
selector: 'app-capabilities',
templateUrl: './capabilities.component.html',
styleUrls: ['./capabilities.component.scss']
})
export class CapabilitiesComponent implements OnInit {
data: any[] = [];
errorMessage: string;
constructor(
private titleService: Title,
public getPageService: GetPageService
) { }
ngOnInit() {
this.getPage();
// line below should be replaced so that title come from getPage data
this.titleService.setTitle('Sample Page Title');
}
getPage() {
this.getPageService.getPage('capabilities')
.subscribe(
data => this.data = data,
error => this.errorMessage = <any>error
);
}
}
我已经尝试附加一个函数来订阅,但到目前为止我只是收到错误。任何指向正确方向的提示都将不胜感激。
在 subscribe()
:
中设置标题
getPage() {
this.getPageService.getPage('capabilities')
.subscribe(
(data: any) => {
this.data = data;
// Set the title here.
this.titleService.setTitle(data.title); // Or data['title']
},
error => console.error(error)
);
}
我有一个通过服务加载内容的页面组件。页面标题当前在 ngOnInit 中设置,但我想更改它以使用通过服务接收的数据设置页面标题。服务收到的 JSON 有一个 "title" 字段,其中包含页面标题的字符串。
现在代码如下所示:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { GetPageService } from '../shared/get-page/get-page.service';
@Component({
selector: 'app-capabilities',
templateUrl: './capabilities.component.html',
styleUrls: ['./capabilities.component.scss']
})
export class CapabilitiesComponent implements OnInit {
data: any[] = [];
errorMessage: string;
constructor(
private titleService: Title,
public getPageService: GetPageService
) { }
ngOnInit() {
this.getPage();
// line below should be replaced so that title come from getPage data
this.titleService.setTitle('Sample Page Title');
}
getPage() {
this.getPageService.getPage('capabilities')
.subscribe(
data => this.data = data,
error => this.errorMessage = <any>error
);
}
}
我已经尝试附加一个函数来订阅,但到目前为止我只是收到错误。任何指向正确方向的提示都将不胜感激。
在 subscribe()
:
getPage() {
this.getPageService.getPage('capabilities')
.subscribe(
(data: any) => {
this.data = data;
// Set the title here.
this.titleService.setTitle(data.title); // Or data['title']
},
error => console.error(error)
);
}