遷移AngularJS指令到角2.X +指令爲HTML裝飾

是否有效不再可以使用角度指示爲「HTML裝飾」，因爲我已經採取了叫他們？遷移AngularJS指令到角2.X +指令爲HTML裝飾

我發現這種模式在角1.x中寶貴的首先建立了一套將功能添加到標記由服務器生成指令的遷移原有應用程序到單頁應用程序。對於Angular Team來說，這似乎是一個疏忽，要消除這種功能。

一個人爲的例子：

有一個jQuery插件漂亮選擇框選擇調用。在1.x中，我會在從服務器返回的頁面上執行以下操作。

HTML：

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

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

這將執行由服務器生成的HTML所選擇的插件，我並不需要我的網頁不是定義的其他任何實質性的改變NG-應用。這種指令風格不能再使用Angular 2+來完成了嗎？

感謝

來源

2017-04-21 user1119648

你的問題沒有意義。修改文章 – Aravind

@Aravind它對我來說非常有意義。你可以編寫一個綁定到頁面加載的服務器端標記的指令。我曾經一直使用相同的模式。它使得添加與舊應用程序的交互非常容易，而不必重寫整個應用程序。據我所知，這種使用指令的方法不適用於新的Angular設計。它基本上使我在現有的，沒有SPA應用程序的角度上無用，並且我放棄了對Vue的支持。 – Peter

@相信你從帖子中推斷出來的。答案 - 角和崗位在angularjs你明白了什麼？ – Aravind

你可以這樣做：

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>

來源

2017-04-21 21:24:40

如果我在模板中使用組件，但該方法有效，但如果我嘗試在不附加到組件的情況下嘗試使用它，則會引發錯誤，指示我的指令不能用作條目組件。 – user1119648

我編輯了我的答案。對你起作用嗎？ –

遷移AngularJS指令到角2.X +指令爲HTML裝飾

回答

相關問題