当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

angular-resize-event

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者湛安宁

操作系统跨平台

开源组织无

适用人群未知

软件概览

Angular Resize Event

Angular 12 directive for detecting changes of an element size.

It is as simple as:

<div (resized)="onResized($event)"></div>

It internally uses browser native ResizeObserver. Therefore it is not supported in IE.

For Angular 11 you can use version 2.1.0 which internally uses uses ResizeSensor from CSS Element Queries that is supported in IE.

Playground

StackBlitz playground

Using the library

Import the library in any Angular application by running:

$ npm install angular-resize-event

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the library module
import { AngularResizeEventModule } from 'angular-resize-event';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify AngularResizeEventModule library as an import
    AngularResizeEventModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Once your library is imported, you can use its resized directive in your Angular application:

<div (resized)="onResized($event)"></div>

import { Component } from '@angular/core';

// Import the resized event model
import { ResizedEvent } from 'angular-resize-event';

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent) {
    this.width = event.newRect.width;
    this.height = event.newRect.height;
  }
}

License

使用案例

Angular----安置物流项目前端框架经验总结

一、架构方面（一） Angular框架有service 、controller层：在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了（因为service的底层机制是通过闭包实现，如果过分使用会导致内存泄露从而导致性能问题）。（二）A
Angular-CLI和ThreeJS

截至angular-cli 1.0.0 ： npm install three --save npm install @types/three 在AppComponent.html中添加div元素：在AppComponent.ts中导入three.js： import * as THREE from 'three'; 使用 @ViewChild('rendererContainer') rend
angular中监听resize事件

参考：https://www.jianshu.com/p/8e746a6c8ac2 import { Observable } from 'rxjs'; // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(300) // 以免频繁处理 .subscribe((event) => {
Angular cdk 学习之 Scrolling

Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件。推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scrolling/overview 想要在我们项目中使用cdk Scrolling功能，需要在我们模块里面 import {ScrollDispatchModule} from ‘@
angular学习笔记4-模板语法

1，模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色模板中的 HTML HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。但值得注意的例外是 <script> 元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，<script> 只是被忽略了。）有些

angular-resize-event

Angular Resize Event

Playground

Using the library

License

同类工具

相关阅读

相关文章

相关问答

相关文档