组件通信问题，将@Output更换为@Input，无法生效

来源：2-7 【ngIf指令组件的输入输出】组件的输入和输出属性

皮小西

2023-01-13

老师好，视频案例中，点击某个按钮，改变背景颜色，使用了@output的方式触发。
但是如果我将其改为@Input的方式，将父组件的handleTabSelected直接传给子组件。
实测可以触发此函数，但是背景颜色却没有变化。这是为什么呢？
src\app\components\scrollable-tab\scrollable-tab.component.html：

 <a href="#" [ngStyle]="{ color: i === selectedIndex ? titleActiveColor : titleColor }"
      (click)="handleTabSelected(menus[i])">

src\app\components\scrollable-tab\scrollable-tab.component.ts：

  @Input() handleTabSelected;

src\app\app.component.html：

<app-scrollable-tab [menus]="topMenus" [backgroundColor]="scrollableTabBgColor" titleColor="#fff"
  titleActiveColor="purple" indicatorColor="yellow" [handleTabSelected]="handleTabSelected">
  <div>Hello</div>
</app-scrollable-tab>

src\app\app.component.ts：

  scrollableTabBgColor = 'red';
  handleTabSelected(topMenu: TopMenu) {
    const colors = ['green', 'blue', 'black'];
    const idx = Math.floor(Math.random() * 3); // 在0~2中取1个color
    this.scrollableTabBgColor = colors[idx];
    console.log(topMenu, 222);
    console.log(this.scrollableTabBgColor,333);
  }

图片描述