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

我在玩angular 2。我想构建一个包含接口的全局服务。此接口可以通过HeaderComponent进行更改。用户通过HeaderComponent更改界面后，另一个ChildComponent中的界面也已更改。因此，我在堆栈溢出上使用了find

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

MyInterface

甲级

B类

一个全局服务正在实现此接口

全球服务

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

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，接口没有更改。甚至没有调用my ChildComponent中的changeInterfaceinterface:MyInterface函数。用户正在使用：

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

对于ChildComponent。但如果我这样做，我的sublime编辑器中就会出现一个错误：参数“interface”隐式地具有“any”类型。那么我做错了什么？我错过了什么

---

您可以在Plunker上看到它。

编辑器中的错误

参数“interface”隐式具有“any”类型

是因为您有严格的TypeScript规则，防止tsc编译您的代码。通过转到tsconfig.json更改配置并关闭noImplicitAny标志：

或者在订阅回调中将类型添加到接口：

globalService.interfaceChanged.subscribe((_interface: MyInterface) 
  => this.changeInterface(_interface));

---

为什么使用“接口”作为字段名？当你需要调试时，这只会让事情变得更糟。@HarryNinh我想这只是为了更好地理解。在原始代码中，此变量不被称为接口。我可以改变它。@HarryNinh我把它改成了(u interface)但是，你能把这些给Plunker吗？因此，如果有人想试验您的代码并解决问题，他们可以很容易地做到。@HarryNinh这可能需要一段时间^^^嘿，我现在正试图通过使用自定义管道来处理这个问题。请你看一下好吗。我已经卡住了。嘿，如果这和这个问题不太相关，我想你最好问一个新问题。这样会让更多人想到：好吧，我打开了一个新的

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

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

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

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

"noImplicitAny": false

globalService.interfaceChanged.subscribe((_interface: MyInterface) 
  => this.changeInterface(_interface));