angular - Angular の子コンポーネントに URL から取得した値を挿入する

Question

子コンポーネントに挿入したい Url から値を挿入しようとしています。URL からパラメーターを取得し、DOM をプロパティで更新できますが、子コンポーネントに挿入すると、同じプロパティが同じように動作しません。

ここで私の親コンポーネント:

@Component({
  selector: 'app-posts',
  templateUrl: 
`
<div class="container">
  <h1><app-task-title [taskId]="router"></app-task-title></h1>
  <h2>{{router}}</h2>
  <app-tab [tacheLabelId]="router"></app-tab>
</div>
`,
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit, DoCheck {

  /**Variables from the url */
  router! : number


  constructor(private route : ActivatedRoute) { }


  ngDoCheck(): void {
    this.router = Number(this.route.snapshot.paramMap.get('route'));
  }

  ngOnInit(): void {
  }
}

h2 タグの変更は確認できますが、その他の変更は確認できません

ここに私の子コンポーネントがあります:

@Component({
  selector: 'app-task-title',
  template: `
      {{taskLabel}}
  `,
  styles: [
  ]
})
export class TaskTitleComponent implements OnInit {

  @Input() taskId! : number;
  taskLabel!: string;
  constructor() { }

  ngOnInit(): void {
    switch (this.taskId) {
      case 1:
        this.taskLabel = "Title 1"
        break;
      case 2:
        this.taskLabel = "Title 2"
        break;
      case 3:
        this.taskLabel = "Title 3"
        break;
      case 4:
        this.taskLabel = "Title 4"
        break;

      default:
        this.taskLabel = "Title 0"
        break;
    }
  }

}

私がすでに試したこと：

1. ルーター プロパティを文字列として使用し、その構文を使用しまし<h1><app-task-title taskId={{router}}></app-task-title></h1>たが、結果は同じです。
2. DOM で値を返すメソッドを使用します。

DOM でプロパティがどのように動作するかについて説明がある場合は、それを歓迎します