Angular报错：无法绑定到'visible'，因它不是NotFound组件的已知属性

问题定位 #

报错提示“无法绑定到'visible'，因它不是'NotFound Component'的已知属性”，核心原因是**EventPageComponent所在模块未正确识别NotFoundComponent的输入属性**，本质是组件的声明/导入流程出现遗漏。

解决方案 #

1. 确保通用组件的模块配置（针对全局复用场景） #

如果NotFoundComponent是多个页面共用的通用组件，建议将其放入共享模块（如SharedModule），并同时在declarations和exports数组中声明：

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [NotFoundComponent],
  imports: [CommonModule],
  exports: [NotFoundComponent] // 导出后才能在其他模块中使用
})
export class SharedModule { }

2. 在EventPage所属模块导入依赖模块 #

找到EventPageComponent所在的模块（如EventModule或AppModule），确保导入包含NotFoundComponent的共享模块：

// event.module.ts 或 app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventPageComponent } from './event-page/event-page.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [EventPageComponent],
  imports: [
    CommonModule,
    SharedModule // 必须导入此模块才能识别NotFoundComponent
  ]
})
export class EventModule { }

3. 校验拼写与选择器一致性 #

确认EventPageComponent模板中：

• 组件选择器为app-not-found，与NotFoundComponent的selector配置完全一致
• [visible]属性拼写和NotFoundComponent中@Input() visible完全匹配（Angular对属性大小写敏感）

4. 清理缓存并重启服务 #

若上述配置均正确，执行以下命令清理Angular缓存并重启开发服务：

ng cache clean
ng serve --open

额外优化建议 #

NotFoundComponent模板中的routerLink可优化为属性绑定形式，更符合Angular规范：

<!-- 原写法 -->
<a routerLink="{{resetLinkRoute}}">{{resetLinkText}}</a>

<!-- 优化后 -->
<a [routerLink]="resetLinkRoute">{{resetLinkText}}</a>

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