typescript - angular 2 – 通过组件更改全局服务中的接口(interface)并更新另一个中更改的接口(interface)

Question

我正在玩 angular 2。我想构建一个包含接口(interface)的全局服务。可以通过 HeaderComponent 更改此接口(interface).用户通过HeaderComponent更改界面后界面也已在另一个 ChildComponent 中更改.因此，我与 this answer 一起工作在堆栈溢出时发现。

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

我的界面

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

一个全局服务正在实现这个接口(interface)。

全局服务

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改变接口(interface)正在工作，但界面不会因 ChildComponent 而改变. changeInterface(interface: MyInterface)在我的 ChildComponent 中运行甚至没有被调用。 Here用户正在使用:

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

对于 ChildComponent .但是，如果我这样做，我的 sublime 编辑器中就会出现错误:“参数‘接口(interface)’隐式地具有‘任何’类型。”那我做错了什么？我在这里缺少什么？

Here你可以在 Plunker 上看到它。

Answer 1

编辑器的错误

"Parameter 'interface' implicitly has an 'any' type."

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

"noImplicitAny": false

或者在您的subscribe 回调中向您的界面添加类型:

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