0

我使用“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`？

提前致谢！

4

1 回答 1

0

哈沙德

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

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

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

还是想用 ElementRef 作为参数

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

干杯

于 2018-08-30T14:33:04.153 回答