Angular12 属性无法在生产中从父级传递到子级

问题描述 投票:0回答:1

我已经构建了一个组件库,然后将这些组件导入到另一个项目中。

在我测试库的应用程序内部,它只是直接从库导入到自身中,一切都运行良好。

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>
angular variables angular12
1个回答
0
投票

解决方案最终确实在编译中,但不是我所期望的。

在父模块中,我正在导入子组件:

import { compchild } from 'library';

declarations: [ comppar, compchild ]

但事实证明,我需要做的是导入孩子的模块,而不是它的组件。

import {compchildmodule } from 'library';

imports: [ CommonModule, compchildmodule ]

这就是为什么它表现得就像孩子不存在一样……因为从某种意义上来说,它不存在。

© www.soinside.com 2019 - 2024. All rights reserved.