Question

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

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;
    }
}

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

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');
    }

}

组件的标题在路由之外。 EventEmmiter不工作...... NgZone也。

Answer 1

创建服务（例如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;
  }

还将服务注入需要更改标题的任何其他组件。由于title是一个对象，因此所有组件都将引用同一个对象。因此，您应该能够简单地从任何组件更改value属性，并且标题应该更新：

export class MainPageComponent {
  constructor(private _configService: ConfigService) {}
  ngOnInit() {
    this._configService.title.value = 'some new title';
  }

Answer 2

为什么不使用 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 );
    }        
}

更详细阅读angulor.io/title

Angular 2更改实时变量 - 从多个组件设置页面标题

2 个答案: