Angular 2中arguments.callee报错的替代方案求助

这个问题我之前也碰到过——Angular默认开启了严格模式，所以arguments.callee这类依赖非标准特性的写法会被直接禁用。别担心，有两个简单的替代方案，既符合严格模式要求，又能完美保留原有功能：

方案1：用具名函数替代匿名函数 #

最直接的解决办法就是把原本的匿名transitionend回调改成具名函数，这样移除监听器时可以直接引用函数名，不用依赖arguments.callee：

expandSection(element) { 
  // 获取元素内部内容的高度，不受其实际尺寸影响
  var sectionHeight = element.scrollHeight; 
  // 让元素过渡到其内部内容的高度
  element.style.height = sectionHeight + 'px'; 

  // 定义具名的过渡结束回调函数
  function onTransitionEnd(e) { 
    console.log(e);
    // 移除该事件监听器，直接引用函数名
    element.removeEventListener('transitionend', onTransitionEnd); 
    // 从元素的内联样式中移除height，使其回到初始值
    element.style.height = null; 
  }

  // 添加事件监听器时使用这个具名函数
  element.addEventListener('transitionend', onTransitionEnd); 
}

这个写法完全符合严格模式规范，而且逻辑和原来的代码完全一致，只是把匿名函数抽成了具名函数而已。

方案2：使用Angular的Renderer2 API（更推荐） #

在Angular应用中，直接操作DOM元素其实不是最佳实践，官方更推荐使用Renderer2来处理DOM操作，这样能更好地适配Angular的变更检测和跨平台特性。下面是用Renderer2改写后的版本：

首先在组件中注入Renderer2：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private renderer: Renderer2) {}

  expandSection(element: HTMLElement) { 
    const sectionHeight = element.scrollHeight; 
    this.renderer.setStyle(element, 'height', `${sectionHeight}px`); 

    // 定义具名回调
    const onTransitionEnd = (e: TransitionEvent) => { 
      console.log(e);
      // 使用Renderer2移除监听器
      this.renderer.removeEventListener(element, 'transitionend', onTransitionEnd); 
      this.renderer.removeStyle(element, 'height'); 
    }

    // 使用Renderer2添加监听器
    this.renderer.listen(element, 'transitionend', onTransitionEnd); 
  }
}

这个版本不仅解决了arguments.callee的问题，还更贴合Angular的开发规范，避免了直接操作DOM带来的潜在问题。

内容的提问来源于stack exchange，提问作者Jeremy Thomas