自定义Angular库在非AppComponent中使用时Input绑定失效

1. 组件选择器大小写不匹配 #

Angular组件选择器严格遵循**kebab-case（短横线分隔小写）**命名规范，你的库组件MyLibComponent的selector大概率是lib-my-lib，而非模板中写的驼峰式lib-MyLib。选择器格式不匹配会导致Angular无法正确识别组件，自然无法传递@Input值。

修复：
修改MyLibExample.component.html中的选择器为标准格式：

<p>my-lib-example works!</p>
<lib-my-lib jsonData='{
    "boolean": true,
    "color": "gold"}'></lib-my-lib>

同时确认MyLibComponent的装饰器中selector定义正确：

@Component({
  selector: 'lib-my-lib', // 必须是kebab-case格式
  // 其余配置
})
export class MyLibComponent implements OnInit {
  // ...
}

2. 路由配置错误导致访问对象错误 #

你的路由把/jsontest直接指向MyLibComponent，而非包含lib-my-lib的MyLibExampleComponent。如果访问/jsontest，加载的是没有传入jsonData的MyLibComponent，打印undefined是必然结果。

修复：
调整路由配置，让目标路径指向MyLibExampleComponent：

const routes: Routes = [
  { path: 'jsontest', component: MyLibExampleComponent }
];

3. 多行JSON字符串的传递问题 #

模板中直接用单引号包裹多行JSON字符串可能存在解析异常，建议将JSON定义在组件类中，再通过属性绑定传递，更稳定可靠。

优化：
在MyLibExampleComponent.ts中定义JSON字符串：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-lib-example',
  templateUrl: './my-lib-example.component.html',
  styleUrls: ['./my-lib-example.component.css']
})
export class MyLibExampleComponent implements OnInit {
  jsonDataStr = `{
    "boolean": true,
    "color": "gold"
  }`;

  constructor() { }

  ngOnInit(): void {
  }
}

模板中改用属性绑定传递：

<p>my-lib-example works!</p>
<lib-my-lib [jsonData]="jsonDataStr"></lib-my-lib>

4. 控制台打印的笔误修正 #

MyLibComponent的ngOnInit里打印的描述是"contructor "，属于笔误，建议改为"ngOnInit "，方便准确判断生命周期阶段的输入值：

ngOnInit(): void {
  console.log("ngOnInit ", this.jsonData);
}

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