从服务中调用组件方法

Question

I am completly new in angular. I have 2 components, one for displaying list of taks, one for adding new one. They use one service. This is my function in TasksComponent:

getTasks(): void {
  this.tasksService.getTasks()
                       .subscribe(
                           tasks => this.tasks = tasks,
                            err => {
                                console.log(err);
                            });
}

And I have also function for adding new Task in TasksInputFormComponent. So I need to call getTasks() function from another component using shared service. I have found this question How to call component method from service? (angular2) and have tried to do something like in example. I don't understand how to do it right. In tasksService:

private componentMethodCallSource = new Subject<any>();
componentMethodCalled$ = this.componentMethodCallSource.asObservable();

In TasksComponent:

  constructor(private tasksService: TasksService) {
    this.tasksService.componentMethodCalled$.subscribe(
    () => {
      this.tasksService.getTasks()
                       .subscribe(
                           tasks => this.tasks = tasks,
                            err => {
                                console.log(err);
                            });
    }
  );

}

In TasksInputFormComponent:

   addTask(task) {
    ...
    this.tasksService.addTask(...);
    this.tasksService.callComponentMethod();
  }

But this code looks absolutly strange and doesn't work. I can't find how to do it properly.

Answer 1

If you want to call a component method from other component you can use ViewChild

@ViewChild(OtherComponent) otherCompt: OtherComponent

and access to method of OtherComponent, example

ngAfterViewInit() {
  this.otherCompt.methodX();
}

Answer 2

In your service:

    private tasksStreamer:Subject<Task[]> = new Subject();
    private tasks:Task[] = [];

    public addNewTask(task){
       this.tasks.push(task);
       this.tasksStreamer.next(this.tasks);
    }

    public getTasksStreamer():Subject<Task[]>{
       return this.tasksStreamer;
    }

AddTaskComponent:

    this.myservice.addTask(task);

TasksComponent:

    private myTasks:Task[] = [];
    this.myservice.getTasksStreamer()
        .subscribe(tasks => this.myTasks = tasks);