访问库组件中父组件的 HTML 字段
Accessing HTML field of Parent Component in Library's component
我使用 'ng generate library' 命令创建了一个 Angular 6 库。该库在 --prod build 之后用于我的基本组件，然后在主应用程序的 app.module.ts 中导入。 Library 中的 ...Component 文件有 @Input("leftPanel") leftPanel: ElementRef;
HTML Div base.component.html 上的元素是这样的：<div #leftPanel></div>
以及使用其选择器的库元素：
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>
库组件实现了 AfterViewInit。在实现方法中，这段代码执行失败：this.leftPanel.nativeElement.style.flexBasis = '50%';
它说，this.leftPanel.nativeElement 未定义。但我可以看到 this.leftPanel 指向 div。想知道为什么它不允许 this.leftPanel.nativeElement` 即使 @Input leftPanel 的类型是 'ElementRef'?
提前致谢！
哈沙德
而不是发送父级 ElementRef 我的感觉是您的组件应该 @Output 并触发由父级处理的事件，以更改本机面板宽度。
像你这样减少对象之间的耦合，使它们更可重用。
在此处查看文档：https://angular.io/guide/component-interaction
仍想使用 ElementRef 作为参数
如果您仍然想将 leftPanel 作为参数发送，您还需要在主组件中使用一个 @Input() 变量，这样它就可以将 <div #leftPanel> 解析为一个局部变量，并且该变量是用于 [leftPanel]="leftPanel"
干杯
我使用 'ng generate library' 命令创建了一个 Angular 6 库。该库在 --prod build 之后用于我的基本组件，然后在主应用程序的 app.module.ts 中导入。 Library 中的 ...Component 文件有 @Input("leftPanel") leftPanel: ElementRef;
HTML Div base.component.html 上的元素是这样的：<div #leftPanel></div>
以及使用其选择器的库元素：
<lib-ng-mylibrary [leftPanel]="leftPanel"> </lib-ng-mylibrary>
库组件实现了 AfterViewInit。在实现方法中，这段代码执行失败：this.leftPanel.nativeElement.style.flexBasis = '50%';
它说，this.leftPanel.nativeElement 未定义。但我可以看到 this.leftPanel 指向 div。想知道为什么它不允许 this.leftPanel.nativeElement` 即使 @Input leftPanel 的类型是 'ElementRef'?
提前致谢！
哈沙德
而不是发送父级 ElementRef 我的感觉是您的组件应该 @Output 并触发由父级处理的事件，以更改本机面板宽度。
像你这样减少对象之间的耦合，使它们更可重用。
在此处查看文档：https://angular.io/guide/component-interaction
仍想使用 ElementRef 作为参数
如果您仍然想将 leftPanel 作为参数发送，您还需要在主组件中使用一个 @Input() 变量，这样它就可以将 <div #leftPanel> 解析为一个局部变量，并且该变量是用于 [leftPanel]="leftPanel"
干杯