时间戳

首页 > 解决方案 > 访问库组件中父组件的 HTML 字段

angular6 - 访问库组件中父组件的 HTML 字段

问题描述

我使用“ng generate library”命令创建了一个 Angular 6 库。该库在 --prod build 之后在我的基础组件中使用，然后在主应用程序的 app.module.ts 中导入。库中的 ...Component 文件有@Input("leftPanel") leftPanel: ElementRef;

base.component.html 上的 HTML Div 元素如下所示：<div #leftPanel></div> 库元素使用其选择器：
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>

库组件实现 AfterViewInit。在实现方法中，这段代码执行失败：this.leftPanel.nativeElement.style.flexBasis = '50%'; 它说，this.leftPanel.nativeElement is undefined。但我可以看到 this.leftPanel 指向 div。想知道为什么即使@Input leftPanel 是'ElementRef'类型，它也不允许this.leftPanel.nativeElement`？

提前致谢！

标签： angular6angular-library

解决方案

哈沙德

ElementRef我的感觉不是发送父级，而是您的组件应该具有@Output并触发由父级处理的事件，以更改本机面板宽度。

这样做可以减少对象之间的耦合并使它们更具可重用性。

请参阅此处的文档：https ://angular.io/guide/component-interaction

还是想用 ElementRef 作为参数

如果您仍想将 leftPanel 作为参数发送，则您的主组件中还需要一个 @Input() 变量，以便它可以解析<div #leftPanel>为局部变量并且该变量用于[leftPanel]="leftPanel"

干杯

推荐阅读