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

Question

I've got an Error message, as the title says. I searched for a solution here but unfortunately @Injectable() is not working, since I'm working with interfaces , and I also tried @Input(). What I'm trying to do here is an Observer pattern, to get notified when something happens on a click.

I tried to copy this pattern from this video here: https://www.youtube.com/watch?v=GioexP_s5Yc . I checked my code several times, and it does not differ except that I use Angular and try to adapt this pattern between 2 components.

This is my setup:

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

Are you trying to inject an interface to your component? FileExplorer is an instance of which class? — Zak, Feb 21 '19 at 08:53
of the interface Subject in my case as written in the constructor . `fileExplorer: Subject` — Roadman1991, Feb 21 '19 at 09:02
I really can't answer you that question. All I basically want is that component X notifys component Y that something was clicked at component X and give the parameters. That's when I discovered this observable pattern. I tried it ^^'. I do not know what the proper way would be. — Roadman1991, Feb 21 '19 at 09:15
Ok I see. Are your components at the same level? Do they share the same parent? — Zak, Feb 21 '19 at 09:20

Zak · Accepted Answer · 2019-02-21T09:27:13.730

1

Angular is trying to instatiate and inject the object fileExplorer to the YComponent. But an interface cannot be instatiated. You have to create an injectable class that extends Subject interface, and inject that to your component. In the video you can see that Workstation extends Subject.

If you want to communicate between components, there are 3 ways in my knowledge:

Passing the reference of one component to another

Communication through parent component

Communication through Service

Here's an article

edited Feb 21 '19 at 09:27

answered Feb 21 '19 at 09:03

Zak

1,005
10
22

so the class that extends Subject is my case is FileExplorerComponent. In that case, I have to implent that class into the JsonBuilderComponent? If I got it right. – Roadman1991 Feb 21 '19 at 09:08

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

1 Answers1