Typescript Angular 2 change live Variable-从多个组件设置页面标题

我需要更新另一个组件中的变量

import {Component, EventEmitter} from 'angular2/core';
import {Input, Output} from "angular2/core";

@Component({
    selector: 'title-page',
    template: `<span>{{tp}}</span>`,
})

export class TitlePage {
    private tp;

    ngOnInit(){
        this.tp = 'Dashboard';
    }

    public setTitle(title:string) {
        this.tp = title;
    }
}

从'angular2/core'导入{Component，EventEmitter}；
从“angular2/core”导入{Input，Output}；
@组成部分({
选择器：“标题页”，
模板：`{tp}}`，
})
出口级标题页{
私人tp；
恩戈尼尼特（）{
this.tp='Dashboard'；
}
公共集合标题（标题：字符串）{
this.tp=标题；
}
}

如何路由此组件需要在不同组件中实时更改标题：

import {Component, Inject, forwardRef} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {NgClass} from 'angular2/common';
import {AppComponent} from "../app.component";
import {TitlePage} from "../components-shared/top-panel/titlePage";

@Component({
    selector: 'main-page',
    styles:[],
    template:`
        <main-page>asd</main-page>
    `,
    directives: [],
    providers: [TitlePage]
})

export class MainPageComponent {

    constructor(private tp:TitlePage){
        this.tp.setTitle('afsdf');
    }

}

从'angular2/core'导入{Component，Inject，forwardRef}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
从'angular2/common'导入{NgClass}；
从“./app.component”导入{AppComponent}；
从“./components shared/top panel/TitlePage”导入{TitlePage}；
@组成部分({
选择器：“主页”，
样式：[]，
模板：`
自闭症
`,
指令：[]，
提供者：[标题页]
})
导出类MainPageComponent{
建造商（私人tp：标题页）{
本.tp.setTitle（“afsdf”）；
}
}

组件的标题不在布线范围内。 EventMiter不工作…NgZone也不可用。

创建服务（例如，

ConfigService

），并将标题放在对象内：

title = { value: 'Some title here' };

然后将服务注入TitlePage组件并绑定到

title.value

属性：

@Component({
    selector: 'title-page',
    template: `<span>{{title.value}}</span>`,
})
export class TitlePage {
  constructor(private _configService: ConfigService) {}
  ngOnInit() {
    this.title = this._configService.title;
  }

创建服务（例如，

ConfigService

），并将标题放在对象内：

title = { value: 'Some title here' };

然后将服务注入TitlePage组件并绑定到

title.value

属性：

@Component({
    selector: 'title-page',
    template: `<span>{{title.value}}</span>`,
})
export class TitlePage {
  constructor(private _configService: ConfigService) {}
  ngOnInit() {
    this.title = this._configService.title;
  }

---

为什么不使用Angular的标题服务

这里有一个例子

在您的输入文件中

import { Title } from '@angular/platform-browser';
bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    Title
    }
]).catch(err => console.error(err));

稍后在您的组件中

 import { Component ,Inject, OnInit} from "@angular/core";
 import { Title } from "@angular/platform-browser";
 @Component({
    template: '<h1>Home page!</h1>'
 })

 export class Home implements OnInit{
   ngOnInit() {
        console.log("App component loaded");
         this.titleService.setTitle( "home" );
    }
   public constructor(@Inject(Title) private titleService: Title ) {}
     setTitle( newTitle: string) {
     this.titleService.setTitle( newTitle );
    }        
}

import{Component，Inject，OnInit}来自“@angular/core”；
从“@angular/platform browser”导入{Title}”；
@组成部分({
模板：“主页！”
})
导出类Home实现OnInit{
恩戈尼尼特（）{
console.log（“加载了应用程序组件”）；
此.titleService.setTitle（“主页”）；
}
公共构造函数（@Inject（Title）private titleService:Title）{}
setTitle（newTitle:string）{
this.titleService.setTitle（newTitle）；
}        
}

---

有关更多详细信息，请阅读

为什么不使用Angular的标题服务

这里有一个例子

在您的输入文件中

import { Title } from '@angular/platform-browser';
bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    Title
    }
]).catch(err => console.error(err));

稍后在您的组件中

 import { Component ,Inject, OnInit} from "@angular/core";
 import { Title } from "@angular/platform-browser";
 @Component({
    template: '<h1>Home page!</h1>'
 })

 export class Home implements OnInit{
   ngOnInit() {
        console.log("App component loaded");
         this.titleService.setTitle( "home" );
    }
   public constructor(@Inject(Title) private titleService: Title ) {}
     setTitle( newTitle: string) {
     this.titleService.setTitle( newTitle );
    }        
}

import{Component，Inject，OnInit}来自“@angular/core”；
从“@angular/platform browser”导入{Title}”；
@组成部分({
模板：“主页！”
})
导出类Home实现OnInit{
恩戈尼尼特（）{
console.log（“加载了应用程序组件”）；
此.titleService.setTitle（“主页”）；
}
公共构造函数（@Inject（Title）private titleService:Title）{}
setTitle（newTitle:string）{
this.titleService.setTitle（newTitle）；
}        
}

---

有关更多详细信息，请阅读

谢谢！！！但不是，标题：{value:'Some title here'}；->title={value:'Some title here'}；谢谢但不是，标题：{value:'Some title here'}；->title={value:'Some title here'}；可能的重复可能的重复