角度参数已更新,但页面内容未更新

我有一个角度应用程序,我在一个url任务/0,我想导航到任务/1,任务/2等。

在task.component.html中,我有一个普通按钮:

  <a (click)="onNext()">
    Next
  </a>

我将显示有关任务的一些信息:

<div class="task-wrapper">
  <div class="task-name">Name: {{ task.name }}</div>
  <div class="task-description">Description: {{ task.description }}</div>
</div>

我导航到要去的地方(下一个任务Id)

任务.component.ts

  onNext() {
    this.router.navigate(['../', this.currentTaskId + 1], {relativeTo: this.route});
  }

这是正常的,因为url改变了。

不幸的是,数据没有改变。我同意更改参数:

任务.component.ts

this.route.params
      .subscribe(
        (params: Params) => {
          this.currentTaskId = +params.taskId;
          this.hackId = +params.hackId;
        }
      )

我已经将console.logs放在ngOnInit中,它们永远不会被触发,除非我刷新页面。如果我刷新了页面,我就有了正确的taskId(它已经在url中了),并且我看到了正确的数据。

有什么帮助吗?

完整成分:

export class TaskDetailComponent implements OnInit {

  task: Task;
  currentTaskId: number;
  hack: Hack;
  hackId: number;
  isLastTask: boolean = false;
  isFirstTask: boolean = false;
  isVisitor: boolean = false;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private hackService: HackService,
    private authService: AuthService
  ) { }

  ngOnInit() {
    console.log("ngOnInit aaaa")
    this.task = new Task({
      name: "",
      description: ""
    })

    this.hack = new Hack({});

    // in case refreshing
    this.route.params
      .subscribe(
        (params: Params) => {
          this.currentTaskId = +params.taskId;
          this.hackId = +params.hackId;
          this.hackService.hacksChanged.subscribe(
            hacks => {
              this.loadinfo(this.hackId, this.currentTaskId);
            }
          );
        }
      )

    // navigating from inside the app, not refreshing
    this.currentTaskId = +this.route.snapshot.params.taskId;
    console.log(this.currentTaskId);
    this.hackId = +this.route.snapshot.params.hackId;
    const hacks = this.hackService.getHacks();
    if (hacks) {
      this.loadinfo(this.hackId, this.currentTaskId);
    }
  }

  onNext() {
    this.router.navigate(['../', this.currentTaskId + 1], {relativeTo: this.route});
  }

  loadinfo(hackId: number, currentTaskId: number) {
    this.hack = this.hackService.getHack(this.hackId);
    this.task = this.hack.tasks[this.currentTaskId];
    const tasksLength = this.hack.tasks.length;
    this.isLastTask = this.currentTaskId === tasksLength - 1
    this.isFirstTask = this.currentTaskId === 0

    // check if user is visitor
    const loggedUserId = this.authService.getUid();
    const creatorUserId = this.route.snapshot.params.userId;
    this.isVisitor = creatorUserId !== loggedUserId 
  }
}