在库组件中访问父组件的HTML字段

Question

我已经使用'ng generate library'命令创建了一个Angular 6库。 --prod构建后，此库在我的基本组件中使用，然后导入到主应用程序的app.module.ts中。库中的... Component文件具有@Input("leftPanel") leftPanel: ElementRef;

base.component.html上的

HTML Div元素如下：<div #leftPanel></div> 还有使用其选择器的library元素：
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>

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

预先感谢！

Answer 1

Harshad

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

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

在此处查看文档：{​​{3}}

仍然要使用ElementRef作为参数

如果您仍然希望将leftPanel作为参数发送，则在主组件中也将需要一个@Input（）变量，以便它可以将<div #leftPanel>解析为局部变量，并在[leftPanel]="leftPanel"

欢呼