我已经构建了一个组件库,然后将这些组件导入到另一个项目中。
在我测试库的应用程序内部,它只是直接从库导入到自身中,一切都运行良好。
CompPar 是父级。
CompChild 位于父级的 html 模板内。
当我使用 CompPar 时,它位于其他组件内部。我正在传递一个名为 label 的变量。
<compar label="Hello!">
图书馆项目,完美。标签从父级传递给子级,子级使用它。
在我将这些导入到的项目中,这不起作用。标签不会传递给孩子。它无法传递我尝试像这样传递的每个属性,除了 id,它由于某种原因确实有效?
编译的时候感觉哪里不对劲?我尝试了在一些帖子中看到的 "buildOptimizer": false ,但要么我把它完全放在了错误的地方(在 "angularCompilerOptions" 下的 tsconfig.lib.prod.json 中, angular.json 文件正在调用此文件用于配置)或者这不是问题。
真的需要帮助,谢谢!
比较零件:
@Component({
selector: 'lo-dropdown',
templateUrl: 'dropdown.component.html'
})
export class Dropdown {
@Input() label: string;
@Input() id: string;
constructor(public utils: Utils, private logger: Logger, private elemRef: ElementRef){}
}
CompPar.html:
<lo-input [attr.id]="id+'_input'" [label]="label">
CompChild.ts:
@Component({
selector: 'lo-input',
templateUrl: 'input.component.html'
})
export class InputLo implements OnInit {
@Input() label: string;
@Input() id: string;
ngOnInit(): void {
console.log("LABEL IN INPUT = " + this.label);
}
}
CompChild.html:
<label [for]="id">{{label}}</label>
解决方案最终确实在编译中,但不是我所期望的。
在父模块中,我正在导入子组件:
import { compchild } from 'library';
declarations: [ comppar, compchild ]
但事实证明,我需要做的是导入孩子的模块,而不是它的组件。
import {compchildmodule } from 'library';
imports: [ CommonModule, compchildmodule ]
这就是为什么它表现得就像孩子不存在一样……因为从某种意义上来说,它不存在。