Question

我遇到一个问题，即子组件未订阅我的服务中的主题。我列出了这些任务组件，并且在服务中正确初始化了前两个组件。然后，我有一个按钮，可导航到在服务中调用addTask（）方法的表单。我知道此表单和方法可以正常工作，因为task数组正在由我的表单更新，并且可以在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 6主题下一个方法未在子组件中触发

0 个答案: