angular 2 –通过组件更改全局服务中的接口，并在另一个组件中更新已更改的接口

我正在使用angular2。我想构建一个包含接口的全局服务。可以通过更改此界面HeaderComponent。用户更改界面后，通过HeaderComponent该界面还可以在另一个界面中进行更改ChildComponent。为此，我使用了在堆栈溢出时找到的答案。

假设我有一个接口和2个不同的类。这些类中的每一个都拥有不同类型的接口。

我的界面

export interface MyInterface {
    key: string,
}

A类

import { MyInterface } from './interfaces/my-interface';
export class ClassA {
    type = "A";
    _interface: MyInterface = {
        key: "value1",
    };
}

B级

import { MyInterface } from './interfaces/my-interface';
export class ClassB {
    type = "B";
    _interface: MyInterface = {
        key: "value2",
    };
}

全局服务正在实现此接口。

全球服务

import { Injectable, EventEmitter }    from '@angular/core';

import { ClassA } from './classes/class-a';
import { ClassB } from './classes/class-b';
import { MyInterface } from './interfaces/my-interface';

@Injectable()
export class GlobalService {

    public interfaceChanged: EventEmitter<MyInterface>;
    _interface: MyInterface;

    interfaceList: string[] = [];

    interfaces = [
        new ClassA(),
        new ClassB()
    ];

    selectedInterface: string;

    constructor() {
        this.interfaceChanged = new EventEmitter<MyInterface>();
        for (var i = 0; i < this.interfaces.length; i++)
            this.interfaceList.push(this.interfaces[i].type);
        this.changeInterface(this.interfaceList[0]);
    }

    changeInterface(_interface: string): void {
        if (this.interfaceList.includes(_interface)) {
            this.selectedInterface = _interface;
            for (var i = 0; i < this.interfaces.length; i++) {
                if (this.interfaces[i].type == this.selectedInterface) {
                    this._interface = this.interfaces[i]._interface;
                    this.interfaceChanged.emit(this.interfaces[i]._interface);
                }
            }
        }
    }
}

现在HeaderComponent，将实施为指令app.component.ts

app.component.ts

import { HeaderDirective } from './directives/header';
import { FooterDirective } from './directives/footer';

@Component({
  selector: 'my-app',
  template: `
    <my-header></my-header>
    <div class="container">
      <router-outlet></router-outlet>
    </div>
    <my-footer></my-footer>
  `,
  styleUrls: [ ],
  directives: [HeaderDirective, FooterDirective, ROUTER_DIRECTIVES]
})
export class AppComponent { }

可以通过选择字段来更改界面：

import { Component } from '@angular/core';
import { MyInterface } from './interfaces/my-interface';
import { LanguageService } from './services/global-service';

@Component({
    selector: 'my-header',
    template: `
      <select (change)="change($event.target.value)">
        <option *ngFor=" let _interface of interfaceList ">{{ _interface }}</option>
      </select>
    `,
})
export class HeaderComponent {

    selectedInterface: string;
    interfaceList: string[];
    _interface: MyInterface;

    constructor(private globalService: GlobalService) {
        this.selectedInterface = this.globalService.selectedInterface;
        this.interfaceList = this.globalService.interfaceList;
        this._interface = this.globalService._interface;
    }

    change(_interface: string) {
        this.globalService.changeInterface(_interface);
    }
}

到目前为止，一切都很好。在通过我更改界面之后，我HeaderComponent希望在另一个界面中也要更改该界面，该界面ChildComponent将通过<router-outlet></router-outlet>

import { Component, EventEmitter } from '@angular/core';
import { GlobalService } from './services/global-service';
import { MyInterface } from './interfaces/my-interface';

@Component({
  selector: 'my-child',
  template: `
    <p>Test: {{ _interface.key }}</p>
  `,
})
export class ChildComponent {

    private _interface: MyInterface;

    constructor(private globalService: GlobalService) {

        this.globalService.interfaceChanged
                          .toPromise()
                          .then(_interface => {
                              this.changeLanguage(_interface);
                          })
                          .catch(err => {
                              console.log(err);
                          });
    }

    changeInterface(_interface: MyInterface) {
        this._interface = _interface;
    }
}

问题是通过可以更改接口，HeaderComponent但是对于，接口不会更改ChildComponent。changeInterface(interface: MyInterface)我的函数ChildComponent甚至都没有被调用。用户在这里使用：

...
constructor(globalService: GlobalService) {
    globalService.interfaceChanged.subscribe(_interface => this.changeInterface(_interface));
}
...

为ChildComponent。但是，如果这样做，我的sublime编辑器中就会出现错误：“参数'interface'隐式具有'any'类型。” 那我在做什么错？我在这里想念什么？

在这里，您可以在Plunker上看到它。