javascript - 将 AngularJS 指令迁移到 Angular 2.x+ 指令作为 HTML 装饰器

Question

是否真的不再可能像我所说的那样将 Angular 指令用作“HTML 装饰器”？

我发现这种模式在 Angular 1.x 中对于将旧应用程序迁移到单页应用程序具有无可估量的值(value)，方法是首先构建一组指令，将功能添加到服务器生成的标记中。删除该功能似乎是 Angular 团队的疏忽。

一个人为的例子:

有一个名为 chosen 的更漂亮的选择框 jQuery 插件。在 1.x 中，我会在从服务器返回的页面上执行以下操作。

HTML:

<select chosen-select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

JS

app.directive('chosenSelect', [
    function() {
        return {
            restrict: 'AE',
            link: function(scope, element, attributes) {
                $(element).chosen();
            }
        };
    }
]);

这将在服务器生成的 HTML 上执行选定的插件，除了定义 ng-app 之外，我不需要对我的页面进行任何实际更改。是否可以不再使用 Angular 2+ 来完成这种风格的指令？

谢谢

Answer 1

你也可以这样做:

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

declare var $: any;

@Directive({selector: '[promoChosenSelect]'})
export class ChosenSelectDirective  implements OnInit{
  constructor(private el: ElementRef) {
  }

  ngOnInit(): void {
    $(this.el.nativeElement).chosen();
  }

在模块中:

@NgModule({
  imports: [],
  exports: [
    ChosenSelectDirective
  ],
  declarations: [
    ClickOutsideDirective,
  ],
  entryComponents: [],
  providers: []
 })
 export class SharedModule {
 }

这里是 html:

 <select promoChosenSelect>
    <option>1</option>
   <option>2</option>
    <option>3</option>
   <option>4</option>
 </select>