0

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

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

这是我的设置：

观察者界面.ts

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

主题界面.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);
    }
  }
}

Y组件.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');
  }
}
4

1 回答 1

1

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

如果要在组件之间进行通信，据我所知有 3 种方式：

  1. 将一个组件的引用传递给另一个组件
  2. 通过父组件通信
  3. 通过服务进行沟通

这是一篇文章

于 2019-02-21T09:03:47.950 回答