角度：@Input更改未在子组件中触发

我有一个由项目列表和地图组成的搜索结果组件。在地图组件上，我有标记，我希望当用户单击其中一个标记时，列表组件中的相应元素会被设置为动画。

因此，我在地图组件上有一个@output和一个事件发射器，该事件发射器将单击的项的ID传递给父级，并且父级将此ID发送给其子级“列表”组件以完成其工作。此输入是原始类型，即数字。

问题在于，即使事件发生时父级中的属性发生变化，子级中的输入也不会更改：

search-results.component.html

<div class="container">
  <div class="left-side">
    <app-search-addreses-form></app-search-addreses-form>
    <app-results-list [travelToAnimate]="travelToAnimate" [travels$]="travels$"></app-results-list>
  </div>
  <div class="right-side">
    <app-results-map
      (propagateTravelId)="handleClickedMarker($event)"
      [userOrigin]="userOrigin"
      [userDestination]="userDestination"
      [travels$]="travels$"
    ></app-results-map>
  </div>
</div>

search-results.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Travel } from 'src/app/core/interfaces/travel';
import { TravelsService } from 'src/app/core/services/travels.service';
import { ActivatedRoute } from '@angular/router';
import { GeoPosition } from 'src/app/core/interfaces/travel-payload';

@Component({
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.scss'],
})
export class SearchResultsComponent implements OnInit {
  travels$: Observable<Travel[]>;
  userOrigin: GeoPosition;
  userDestination: GeoPosition;
  travelToAnimate: number;
  constructor(private travelsService: TravelsService, private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe((params) => {
      this.userOrigin = {
        address: '',
        latitude: params.origin_latitude,
        longitude: params.origin_longitude,
      };
      this.userDestination = {
        address: '',
        latitude: params.destination_latitude,
        longitude: params.destination_longitude,
      };
      this.travels$ = this.travelsService.getTravelsNearOfDestination(
        params.destination_latitude,
        params.destination_longitude
      );
    });
  }
  handleClickedMarker(id: number): void {
    this.travelToAnimate = id;
    console.log('doing click', this.travelToAnimate); // "doing click 421" it changes when a marker is clicked
  }
}

import { Component, Input, OnChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { Travel } from 'src/app/core/interfaces/travel';

@Component({
  selector: 'app-results-list',
  templateUrl: './results-list.component.html',
  styleUrls: ['./results-list.component.scss'],
})
export class ResultsListComponent implements OnChanges {
  @Input() travels$: Observable<Travel[]>;
  @Input() travelToAnimate: number;
  constructor() {}

  ngOnChanges(): void {
    console.log('change detected: ', this.travelToAnimate); // "change detected :undefined", fired only once
  }
}