无法解析组件的所有参数：(?)

Question

如标题所示，我收到一条错误消息。我在这里搜索了一个解决方案，但不幸的是 @Injectable() 不起作用，因为我正在使用 interfaces ，我也尝试过 @Input()。我在这里尝试做的是一个观察者模式，当点击发生某些事情时得到通知。

我试图从这里的视频中复制这个模式：https://www.youtube.com/watch?v=GioexP_s5Yc。我检查了我的代码几次，除了我使用 Angular 并尝试在 2 个组件之间调整此模式外，它没有什么不同。

这是我的设置：

observer.interface.ts

export interface Observer {
    update(fileName: string);
}

subject.interface.ts

import { Observer } from "./observer.interface";

export interface Subject {
    registerObserver(o: Observer);
    removeObserver(o: Observer);
    notifyObservers();
}

XComponent.ts

export class FileExplorerComponent implements OnInit, Subject {

  fileString: string;
  private observers: Observer[] = [];

  showFile(fileName) {
    this.fileString = fileName;
    this.notifyObservers();
  }

  public registerObserver(o: Observer) {
    this.observers.push(o);
  }

  public removeObserver(o: Observer) {
    let index = this.observers.indexOf(o);
    this.observers.splice(index, 1);
  }

  public notifyObservers() {
    for (let observer of this.observers) {
      observer.update(this.fileString);
    }
  }
}

YComponent.ts

import { Subject } from '../X/subject.interface';
import { Observer } from '../X/observer.interface';

export class JsonBuilderComponent implements Observer {

subject: Subject;

constructor(fileExplorer: Subject){
this.subject = fileExplorer;
fileExplorer.registerObserver(this);
}

  update(fileName: string) {
    console.log('I need to update my Editor with ' + 'fileName');
  }
}

Answer 1

Angular 正在尝试实例化对象 fileExplorer 并将其注入 YComponent。但是不能实例化接口。您必须创建一个扩展 Subject 接口的可注入 class，并将其注入到您的组件中。在视频中您可以看到 Workstation 扩展了 Subject。

如果要实现组件之间的通信，据我所知有3种方式：

Passing the reference of one component to another

Communication through parent component

Communication through Service

这是一个article

无法解析组件的所有参数：(?)

Can't resolve all parameters for Component: (?)

angular

observer-pattern

subject

subject-observer