Question

我完全是棱角分明的。我有2个组件，一个用于显示目标列表，一个用于添加新组件。他们使用一项服务。这是我在TasksComponent中的函数：

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

我还有在TasksInputFormComponent中添加新任务的功能。所以我需要使用共享服务从另一个组件调用getTasks（）函数。我发现了这个问题How to call component method from service? (angular2)，并尝试过像示例中那样的事情。我不明白如何正确行事。在tasksService中：

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

在TasksComponent中：

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

}

在TasksInputFormComponent中：

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

但是这段代码看起来绝对奇怪而且不起作用。我找不到如何正确地做到这一点。

Answer 1

如果要从其他组件调用组件方法，可以使用ViewChild

@ViewChild(OtherComponent) otherCompt: OtherComponent

并访问OtherComponent的方法，例如

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

Answer 2

在您的服务中：

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

从服务调用组件方法

2 个答案: