angular动态设置disable

Posted 2023-04-05

Intel EIST Intel智能降频技术，EIST全称为“Enhanced Intel Speed Step Technology”， 是Intel公司专门为移动平台和服务器平台处理器开发的一种节电技术。到后来，新推出的桌面处理器也内置了该项技术，从而使更多的个人电脑用户受益。

设置项有Disabled、Enabled、Auto。默认是Auto。Disabled就是关闭这项功能，Enabled就是开启，Auto则是根据CPU是否支持自动设置开启或关闭。从节能角度看，还是开启为好，开启后，系统会依据CPU的负载自动调整CPU的频率。

Intel C-State Intel深度节能技术，C-State是显著降低处理器空闲期间功耗的一种电源管理状态。相当于ACPI的C0状态。当安装的CPU支持C-State时，这个选项才显示出来。设置项有Disabled（关闭）、Enabled（开启），默认是Enabled。开启这项功能后，配合Intel的睿频技术，当CPU一个核心运行时，倍频会达到默认的最高值，比如i5 750能达到24倍频，3.2GHz。

参考技术A 如果你之前使用 AngularJS（第一代 Angular 框架）来编程，可能会使用 $compile 服务生成 html，并连接到数据模型从而获得双向绑定功能：
const template = '<span>generated on the fly: name</span>'const linkFn = $compile(template);const dataModel = $scope.$new();dataModel.name = 'dynamic';// link data model to a templatelinkFn(dataModel);

AngularJS 中指令可以使用多种方式去修改 DOM，但是框架却无法感知修改了什么。这种方式产生的问题和任何动态环境下的问题一样，很难去优化性能。当然，动态模板不是 AngularJS 性能慢的主要元凶，但也是重要原因之一。
我在看了 Angular 内部代码一段时间后，发现这个新设计的框架非常重视性能，在 Angular 源码里你会经常发现这几句话（注：为清晰理解，不翻译）：
Attention: Adding fields to this is performance sensitive!

Note: We use one type for all nodes so that loops that loop over all nodes of a ViewDefinition stay monomorphic!

For performance reasons, we want to check and update the list every five seconds.

所以，Angular 设计者决定牺牲灵活性来获得更大的性能提升，如引入了 JIT 和 AOT Compiler 和静态模板（static templates），指令/模块工厂（ComponentFactory），工厂解析器（ComponentFactoryResolver）。对 AngularJS 社区来说，这些概念很陌生，甚至充满敌意，不过不用担心，如果你之前仅仅是听说过这些概念，但现在想知道这些是什么，继续阅读本文，将让你茅塞顿开。
注：实际上，JIT/AOT Compiler 说的是同一个 Compiler，只是这个 Compiler 在 building time 阶段还是在 running time 阶段被使用而已。
至于 factory，是 Angular Compiler 把你写的组件如 a.component.ts 编译为 a.component.ngfactory.js，即 Compiler 使用 @Component decorator 作为原材料，把你写的组件/指令类编译为另一个试图工厂类。
回到刚刚的 JIT/AOT Compiler，如果 a.component.ngfactory.js 是在 build 阶段生成的那就是 AOT Compiler，这个 Compiler 不会被打包到依赖包里；如果是在 run 阶段生成，那 Compiler 就需要被打包到依赖包里，被用户下载到本地，在运行时 Compiler 会编译组件/指令类生成对应的视图工厂类，仅此而已。下文将会看下这些 *.ngfactory.js 文件代码是什么样的。
至于 factory resolver，那就更简单了，就是一个对象，通过它拿到那些编译后的 factory 对象。本回答被提问者和网友采纳

打字稿 | JavaScript | Angular 2：动态设置@HostListener 参数

【中文标题】打字稿 | JavaScript | Angular 2：动态设置@HostListener 参数

【英文标题】：TypeScript | JavaScript | Angular 2: Dynamically Set @HostListener Argument

【发布时间】：2017-06-27 21:37:25

【问题描述】：

动态设置@HostListener 的参数

我有一个指令需要监听工程师以声明方式提供的任何事件。这是一个例子：

import  Directive, Input, ElementRef, HostListener, OnInit  from '@angular/core';
//--
import  Sandbox  from '../../../sandbox';

@Directive( selector: '[addItem]' )
class AddNewItemDirective implements OnInit 
    @Input('addItem') data;
    @Input() on: string = 'click';

    constructor(private $: Sandbox, private element: ElementRef)  
    ngOnInit()  console.log('@INIT', this); 

    @HostListener('click', ['$event']) handleEvent(e) 
        console.log('add-item', e);
    


export  AddNewItemDirective ;

这是它的用法：

<button class="btn btn-primary" [addItem]=" name: 'Jeffrey' " on="focus">Add New Item</button>

这很好用。但是，我的直觉告诉我，我应该能够在渲染时根据输入参数动态设置 HostListener 的参数：

@Directive( selector: '[addItem]' )
class AddNewItemDirective implements OnInit 
    @Input('addItem') data;
    @Input() on: string = 'click';

    constructor(private $: Sandbox, private element: ElementRef)  
    ngOnInit()  console.log('@INIT', this); 

    @HostListener(this.on, ['$event']) handleEvent(e) 
        console.log('add-item', e);
    

当然，在调用 ngOnInit 之前，this.on 不会被 'focus' 覆盖。 令我惊讶，this.on 引发错误，因为undefined has no property 'on'。因此，当我的指令类被实例化时，无论出于何种原因，this === undefined.

我发现了一个类似的问题here，不过，它希望在 runtime 时动态修改 HostListener，而我只需要在 compile/render/instantiation 时对其进行修改。

有人可以说明我如何做到这一点吗？

谢谢

【参考方案1】：

HostListener 不是动态的，不能在运行时更改。你应该使用Renderer 类，它提供了listen 方法：

@Input()
public on:string;
private dispose:Function;

constructor(private renderer:Renderer, private elementRef:ElementRef)

ngOnInit()
    this.dispose = this.renderer.listen(this.elementRef.nativeElement, this.on, e => console.log(e));


ngOnDestroy()
     this.dispose();