标签: elementref

我已经看到了许多让我更加困惑的 ElenenetRef 和 TemplateRef 的例子。

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

HTML

<ng-template #element>
  <div style="border:solid 3px yellow;width:250px;
height:250px;position:relative;top:0px;">
    this is my element
  </div>

</ng-template>
<ng-container #template>

</ng-container>

.ts 文件

@ViewChild('element', { read: TemplateRef }) element: TemplateRef<any>;
  @ViewChild('template', { read: ViewContainerRef }) template: ViewContainerRef;

 ngAfterViewInit() {
    this.template.createEmbeddedView(this.element);
  }

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

@ViewChild('element', { read: ElementRef }) element: ElementRef;

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

我正在开发一个角度指令，将下拉列表转换为 radioListbox。这是我的初始代码：

import { Directive, Input, TemplateRef, ViewContainerRef,OnInit } from '@angular/core';

@Directive({
  selector: '[radioList]'
})
export class RadioListDirective implements OnInit  {



  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {

  }

  ngOnInit() {

    console.log(this.templateRef);
    this.vcRef.createEmbeddedView(this.templateRef);

  }
}

和

<div>
  test
</div>


<select *radioList><option>1</option><option>2</option></select>

它应该记录TemplateRef其ElementRefnativeElement 是 a 的select。但结果是它的下一个元素是select.

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

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

组件名称.component.ts :

@ViewChild("test") private _scrollView: ElementRef;

constructor(page: Page) {

    page.actionBarHidden = true;

}

ngAfterViewInit() {

    console.log("ScrollView element:", this._scrollView.nativeElement);

}

...

组件名称.component.html :

<GridLayout columns="*" rows="*, auto">

    <ScrollView (swipe)="onSwipe($event)" col="0" row="0" #test>
        <StackLayout>

...

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

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

一个错误？

我有两个命名模板。每当第一个的内容发生变化时，我想将第一个的高度应用于第二个。我可以使用组件内的 ElementRef 访问它们。因此，当我更改绑定到第一个模板的属性时，我使用相应的 ElementRef 获取其高度并将其应用于第二个模板的 ElementRef。

现在，问题是，在属性更改后，我从第一个模板对应的 ElementRef 中获取的高度不是更新后的高度。它在属性更改和重新渲染之前返回 div 的高度。

我希望能够在 div 更新后获得实际渲染高度。我究竟做错了什么？

更新：

编码：

var height = `${this.profile.nativeElement.offsetHeight}px`;
this.renderer.setStyle(this.board.nativeElement, "height", height);
this.renderer.setStyle(
this.board.nativeElement,
"overflow-y",
"scroll"
);

这里轮廓是对应于第一个div的ElementRef和登上第二个的ElementRef。属性更改后，我调用包含上述代码的函数。那么我得到的高度就是div的旧高度，也就是属性改变和重新渲染之前的高度。

我正在将我的项目从 Ionc3 迁移到 Ionic5。我有一个 ion-textarea ，它会随着用户键入而增加高度，并且它在 Ionic3 中工作。以下是代码。

HTML 页面：

<ion-textarea #hvUserPost type="text" (input)="adjustDesc()"></ion-textarea>

TS页面：

@ViewChild('hvUserPost') hvUserPost: ElementRef;
adjustDesc() {
    let textArea;
    textArea = this.hvUserPost['_elementRef'].nativeElement.getElementsByClassName("text-input")[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    var scrollHeight = textArea.scrollHeight;
    textArea.style.height = scrollHeight + 'px';
}

现在在 Ionic4 中唯一改变的是以下声明

@ViewChild('hvUserPost', {static: false}) hvUserPost: ElementRef;

在 Ionic4 中，我收到以下错误。

ERROR TypeError: Cannot read property 'nativeElement' of undefined

所以this.hvUserPost['_elementRef']是未定义的，this.hvUserPost.nativeElement也是未定义的。

我正在尝试创建一个自定义指令来替换我的自定义指令的内部文本。我似乎无法访问内部文本内容以应用一些逻辑。

这是代码：

import { Directive, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';

@Directive({
  selector: 'text-transformer'
})
export class TextTransformerDirective {
  constructor(
    private elem: ElementRef) {
      // need access to inner text before setting new text
      // elem.nativeElement.outerHTML, innerHTML, outerText, innerText are all empty at this point
      elem.nativeElement.outerHTML = '<span>My new Text</span>';
  }
}

用法：

<text-transformer>Some text</text-transformer>

我想检查标记内的文本，在这种情况下为“某些文本”。我似乎无法在指令中访问它。

我应该改为使用组件吗？

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

这是页面的样子：

<div fxLayoutAlign="begin">
  <button mat-button color="primary" [routerLink]="['/Administration']">
    <i class="far fa-arrow-alt-circle-left"></i> Back to Administration
  </button>
</div>
    <div class="app-loading" *ngIf="_loading">
      <mat-spinner diameter=100></mat-spinner>
    </div>
    <div *ngIf="!_loading">

    <div class="knowledgeBody">

      <div *ngIf="_mode === 'view'">
        {{ _knowledgeText }}
        <div fxLayoutAlign="end">
          <button mat-button (click)="edit_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-edit"></i> Edit
          </button>
        </div>
      </div>

      <div *ngIf="_mode !== 'view'">
        <textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
          {{ _knowledgeText }}
        </textarea>

        <div fxLayoutAlign="end">
          <button mat-button (click)="save_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-save"></i> …

错误错误：未捕获（承诺）：错误：StaticInjectorError（AppModule）[ElementRef]：
StaticInjectorError（平台：核心）[ElementRef]：NullInjectorError：没有提供ElementRef！错误：StaticInjectorError(AppModule)[ElementRef]:
StaticInjectorError(Platform:core)[ElementRef]:NullInjectorError: ElementRef 没有提供者！

这是我在我的ElementRef一项服务中使用 angular5 时遇到的错误，我确实像这样导入了它：

import { Injectable,ElementRef } from '@angular/core';

我正在运行我的角度5项目ng serve,然后出现这样的错误:

node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96)中的错误:错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(115,208):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(12,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(29,45):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(37,44):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-window.d.ts(14,40):错误TS2315:类型 'ElementRef' 不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/popover/popover.d.ts(11,27):错误TS2315:类型 'ElementRef' 不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/popover/popover.d.ts(70,30):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/tooltip/tooltip.d.ts(9,27):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/tooltip/tooltip.d.ts(54,30):错误TS2315:类型'ElementRef'不是通用的.node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts(94,30):错误TS2315:类型 'ElementRef' 不是通用的.