Làm thế nào để bạn kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần?
Làm thế nào để bạn kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần?
Để kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần Angular, bạn có thể sử dụng một số phương pháp khác nhau. Dưới đây là hai phương pháp phổ biến:
Bạn có thể sử dụng trình bao nghe sự kiện HostListener
để lắng nghe sự kiện thay đổi kích thước cửa sổ và sau đó cập nhật kích thước của phần tử tương ứng. Dưới đây là một ví dụ về cách thực hiện:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-resizable',
template: `
<div class="resizable" [style.width.px]="width" [style.height.px]="height">
<h1>Geeks For Geeks!</h1>
Cách kiểm soát kích thước
</div>
`,
styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {
width = 400;
height = 300;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.width = event.target.innerWidth;
this.height = event.target.innerHeight;
}
}
Trong ví dụ trên, mỗi khi cửa sổ được thay đổi kích thước, phương thức onResize
sẽ được gọi và cập nhật kích thước của phần tử div
tương ứng[2].
Một phương pháp khác là sử dụng gói angular-resize-event
từ NPM, cho phép bạn dễ dàng lắng nghe sự kiện thay đổi kích thước của phần tử. Đầu tiên, bạn cần cài đặt gói này:
npm install angular-resize-event
Sau đó, bạn có thể sử dụng directive resized
để lắng nghe sự kiện thay đổi kích thước và xử lý nó trong thành phần của mình:
import { Component } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';
@Component({
selector: 'my-component',
template: `<div (resized)="onResized($event)"></div>`
})
export class MyComponent {
onResized(event: ResizedEvent) {
console.log('New widt...
middle
Chưa có bình luận nào