Angular编译报错：已用@Input仍无法绑定'isShown'，如何解决？

以下是几个必查的解决步骤：

• 确认子组件正确导出并匹配选择器
  检查子组件代码，确保组件类被导出，且selector与父组件中使用的标签完全一致：

  // childComponent.ts
  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'tab', // 必须和父组件里的<tab>标签对应
    templateUrl: './child.component.html'
  })
  export class ChildComponent { // 必须导出该类
    @Input() isShown: boolean;
  }
  

• 在模块中正确声明子组件
  子组件必须注册在所属模块的declarations数组中；若要被其他模块使用，还需添加到exports数组：

  // 子组件所在模块（如AppModule）
  import { NgModule } from '@angular/core';
  import { ChildComponent } from './childComponent.ts';
  import { ParentComponent } from './parentComponent.ts';
  
  @NgModule({
    declarations: [
      ParentComponent,
      ChildComponent // 务必添加此处
    ],
    exports: [ChildComponent] // 若父组件在其他模块，需导出该组件
  })
  export class AppModule { }
  

  如果父组件属于另一个模块，要确保已导入包含子组件的模块。

• 检查@Input的导入与使用
  确认已从@angular/core导入Input装饰器，属性装饰语法无误，避免拼写错误或漏写括号：

  import { Input } from '@angular/core'; // 必须导入
  @Input() isShown: boolean; // 语法正确，无拼写错误
  

• 排查父组件模板的标签拼写
  父组件模板中使用的<tab>标签必须和子组件的selector完全匹配，比如子组件selector是app-tab，则父组件要写<app-tab [isShown]="..."></app-tab>，不能随意简写。

内容的提问来源于stack exchange，提问作者Aisha G