时间戳

首页 > 解决方案 > Angular 6 Subject下一个方法未在子组件中触发

angular - Angular 6 Subject下一个方法未在子组件中触发

问题描述

我遇到了一个问题，即子组件未订阅我服务中的主题。我列出了这些任务组件，并且在服务显示中正确初始化了前两个。然后我有一个按钮，它导航到一个表单，该表单调用服务中的 addTask() 方法。我知道这个表单和方法工作正常，因为我的表单正在更新任务数组，我可以通过我的 console.log 语句看到这一点。但是，当我向后导航时，我只看到原始的两个任务，并且我在控制台中看到我的组件 ngOnInit 函数从未被触发。我在表单提交时调用 addTask 方法。该服务在 appmodule 中提供，我的文件夹结构如下：

work-folder:
 edit-task-folder (form to add new task)
 wi-list-folder (component to list tasks. No being updated here)
 workitemservice.ts

服务

export class WorkItemService {
tasksChanged = new Subject<Task[]>();

private tasks: Task[] = [
  new Task(
    'example title',
    'this is the task desciption',
    4 
  ),
  new Task(
    'example title2',
    'this is the task desciption2',
    4 
  )
];

addTask(task: Task) {
  this.tasks.push(task);
  this.tasksChanged.next(this.tasks.slice());
  console.log('tasks in service', this.tasks.slice());
}
getTasks(){
  console.log('getTasks() returns: ', this.tasks);
  return this.tasks.slice();
}

这是我的组件文件：

subscription: Subscription;
  tasks: Task[];

  constructor(private workItemService: WorkItemService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.subscription = this.workItemService.tasksChanged
      .subscribe(
        (tasks: Task[]) => {
          this.tasks = tasks;
          console.log('tasks in subscription', this.tasks)
        }
      );
    this.tasks = this.workItemService.getTasks();
  }

感谢您的任何帮助！

更新：

该问题已通过在组件文件中删除服务作为提供程序来解决>

标签： angular

解决方案

推荐阅读