正如标题所说,我收到了错误消息。我在这里搜索了一个解决方案,但不幸的是@Injectable()
不工作,因为我正在使用接口,我也尝试过@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');
}
}
Angular正在尝试实例化并将对象fileExplorer注入YComponent。但是接口无法实现。您必须创建一个扩展Subject接口的可注入类,并将其注入您的组件。在视频中,您可以看到Workstation扩展了Subject。
如果您想在组件之间进行通信,我知道有三种方法:
- 将一个组件的引用传递给另一个组件
- 通过父组件进行通信
- 通过服务沟通
这是一个article