问题标签 [elementref]

我见过很多 ElemenetRef 和 TemplateRef 的例子，这让我更加困惑。

1. ElementRef 和 TemplateRef 有什么区别为什么我们应该使用一个而不是另一个

HTML

.ts 文件

现在，如果我将上面的代码更改为使用 ElementRef，那么它也可以正常工作

所以我的问题是，如果我可以通过使用 ElementRef 来实现相同的效果，我为什么要使用 TemplateRef

在组件模板中，我正在使用 ElementRef 选择一个 svg 元素。它工作正常，但是当我构建应用程序并打开它时 elementRef 为空。

elementRef 目标

将其传递给 elementRef 变量

加载内容后，我选择 svg ：

elementRef.querySelector('svg')为空

当我运行“ npm run build ”并转到 dist/index.html 时，contentDocument > 为 null：

从我的组件（例如 Component）中，我正在尝试实例化一个 Angular 组件（例如 CustomComponent），设置一些属性，然后将其发送到一个表（例如 CustomTable）进行渲染，但我不断得到[object HTMLElement]而不是表格单元格中呈现的元素。这是我的设置：

组件.html

组件.ts

自定义组件.html

自定义组件.ts

自定义表格.html

我的文本列渲染得很好，只是custom-component没有正确渲染。

有什么建议么？

请注意，CustomTable 需要能够接受任何类型的组件/元素detailComponent，而不仅仅是我的 CustomComponent。

我正在使用 Angular 6 应用程序。我有一个文本区域，我想在页面加载后立即关注它。我不能这样做。

这是页面的样子：

感兴趣的文本区域是#knowledgeTextarea。

这是页面的组件：

当我运行它时，我收到以下错误：

我已经读到，当您在 *ngIf 块中使用 # 标识 (#knowledgeTextarea) 引用页面上的元素时，可能会发生这种情况。所以这个……</p>

…不管用。

但那有什么替代方案呢？

我试过这个……</p>

…这有效，但后来我得到了 ExpressionChangedAfterItHasBeenCheckedError，JB Nizet 告诉我不要在这里做：Getting ExpressionChangedAfterItHasBeenCheckedError 错误。

如果有其他方法可以做到这一点，请告诉我。我想要的只是能够在页面加载时给 textarea 焦点。任何实现这一目标的方式都将不胜感激。谢谢。

在我的应用程序中，我具有以下结构：

在标题中，我想将滚动添加到main. 我的滚动方法作为参数elementRef。但我不能得到一个，@ViewChild因为组件main不是标题的孩子。

有没有机会获得elementRef不是孩子的组件？

目前我正在使用document.getElementById获取需要检查的确切复选框。

这是代码：

}

如何替换document.getElementbyId或elementRef任何其他打字稿功能。

仅供参考，我确实使用了elementRefusingquerySelector但日志说这nativeElement是未定义的。

我在 Angular 的一个项目中工作，那里有很多文本框，我必须限制用户只接受数字，我不想在 Angular 中使用任何 Javascript/Jquery 代码，只想使用 Angular 的东西，所以我创建了一个指令但是当我部署代码时，代码构建和部署团队告诉 ElementRef 存在安全风险，还有其他方法/替代方法来完成这些。我的指令代码如下。

我有一个自定义指令来调整 ion-textarea 高度以在输入文本时自动调整高度，而不是设置固定的行高或在 textarea 填满时设置难看的滚动条。

在 Ionic-4 中，我无法获取 ion-textarea 的 html textarea 的 nativeElement。任何帮助都会很棒

它在 Angular 6 和 Ionic 4 上运行，但是当我尝试获取 this.element.nativeElement.getElementsByTagName('textarea')[0] 时，它始终未定义，因此我无法以编程方式设置高度。

由于 const textArea 总是返回未定义，我无法将高度设置为跟随滚动高度以防止滚动条。

有人能在 Ionic-4 中做到这一点吗？根据上面的代码在 Ionic-3 中看到了工作示例。

谢谢罗伊

我正在使用 NativeScript (CLI v5.2.0) Angular (v7.2.3) 开发一个移动应用程序，并且我的 @ViewChild ElementRef 未定义。

我在“@angular/core”的导入中检查了 ViewChild 和 ElementRef 的存在，重命名了我的 @ViewChild 变量，将范围从公共更改为私有，在 ngAfterViewInit 中移动了 console.log()（参见：https://github .com/NativeScript/nativescript-angular/issues/188#issuecomment-212815619）并使用“tns debug android --clean --bundle”重建我的项目。

组件名称.component.ts ：

组件名称.component.html ：

如果我将#test 放在开头，就在 ScrollView 元素之后，我有未定义的“this._scollView”变量。

如果我把#test 放在最后，就像上面的例子一样，一切正常，我在 console.log(this._scrollView.nativeElement) 中显示我的元素！

一个错误？

据我了解，在 Angular 2+ 中使用 Renderer2 将“（单击）”属性动态添加到 DOM 元素是不可能的。

如果这是真的，那么可爱的人们如何在组件中动态创建 HTML 时添加“（单击）”属性，或者您使用什么解决方法？