要解决Angular-resize-event无法对textarea起作用的问题,可以使用以下方法:
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { AngularResizeEventService } from 'angular-resize-event';
@Component({
selector: 'app-textarea-resize',
templateUrl: './textarea-resize.component.html',
styleUrls: ['./textarea-resize.component.css']
})
export class TextareaResizeComponent implements AfterViewInit {
@ViewChild('textarea', { static: true }) textarea: ElementRef;
constructor(private resizeService: AngularResizeEventService) {}
ngAfterViewInit() {
this.resizeService.initResizeEvent(this.textarea.nativeElement);
}
}
import { Component, ElementRef, ViewChild, AfterViewInit, NgZone } from '@angular/core';
import { AngularResizeEventService } from 'angular-resize-event';
@Component({
selector: 'app-textarea-resize',
templateUrl: './textarea-resize.component.html',
styleUrls: ['./textarea-resize.component.css']
})
export class TextareaResizeComponent implements AfterViewInit {
@ViewChild('textarea', { static: true }) textarea: ElementRef;
constructor(private resizeService: AngularResizeEventService, private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.resizeService.initResizeEvent(this.textarea.nativeElement);
});
}
}
这样,Angular会在变化检测周期中检测到textarea的大小变化,并相应地更新视图。