Angular 6 - 一个指令中的多个函数。在指令中使用onResize()和onInit()函数。_编程开发

Angular 6 - 一个指令中的多个函数。在指令中使用onResize()和onInit()函数。

创始人

2024-10-16 02:31:41

0次

在Angular 6中，在一个指令中使用多个函数可以通过以下步骤实现：

首先，在你的指令类中，定义并实现这两个函数。例如：

import { Directive, HostListener, OnInit } from '@angular/core';

@Directive({
  selector: '[appResize]'
})
export class ResizeDirective implements OnInit {
  constructor() { }

  ngOnInit() {
    this.onInit();
  }

  @HostListener('window:resize')
  onResize() {
    // 处理窗口大小改变时的逻辑
  }

  onInit() {
    // 初始化逻辑
  }
}

接下来，将指令应用到需要的HTML元素上，例如：

这是一个示例

这样，当窗口大小改变时，onResize()函数会被调用，而在指令初始化时，onInit()函数会被调用。

请注意，需要在指令类上添加@Directive装饰器，并使用selector属性来定义指令选择器，以便在HTML中应用指令。使用@HostListener装饰器来监听事件，如窗口大小改变事件。

以上是一个简单的示例，你可以在这个基础上根据你的需求进行逻辑的扩展和修改。

上一篇：Angular 6 - 选中姓名时显示动态div

下一篇：Angular 6 - 允许用户在未登录的情况下访问页面

Angular 6 - 一个指令中的多个函数。在指令中使用onResize()和onInit()函数。

相关内容

热门资讯