角度2の指令定義を上書きする方法

Question

角度1では、指令定義を飾る（上書きする）ことができます。

これは、ここで説明されていますhttp://www.bennadel.com/blog/2926-overriding-directive-definitions-in-angularjs.htm

このため

angular.module("X").decorator(

組み込み関数があります。

angular2にはモジュールがありません。推奨される方法は、typescriptモジュールを使用することです。

angle2でディレクティブをどのようにデコレート（オーバーライド）することができますか？

私がこれをやりたい主な理由は、私はいくつかのサイトで私のアプリを配備する際のカスタマイズです。

私はすべてのアプリケーションでbundle.jsを持っているとしましょう。すべてのサイト展開に対して既存のbundle.jsを変更して再構築するのではなく、多くのカスタマイズでcustomer.jsをドロップするだけです。

のは、英雄のツアーから、具体的な例を追加してみましょう： 私はjavascriptのファイルに私のアプリのコンポーネントを定義した：私は別のコンポーネントCustomHeroDetailComponentでHeroDetailComponentを切り替えるために、別のJavaScriptファイルにできるようにしたい

import {Component, OnInit} from 'angular2/core'; 
import {Hero} from './hero'; 
import {HeroDetailComponent} from './hero-detail.component'; 
import {HeroService} from './hero.service'; 

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul class="heroes"> 
     <li *ngFor="#hero of heroes" 
     [class.selected]="hero === selectedHero" 
     (click)="onSelect(hero)"> 
     <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 
    </ul> 
    <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
    `, 

    directives: [HeroDetailComponent], 
    providers: [HeroService] 
}) 

。

これはどのように可能ですか？

Answer 1

ダイナミクスに似た何かをカスタムモジュールをロードし、POCのRouteConfigアノテーションを設定しました。スクリプトファイルをスクリプトからインポートするには、動的モジュールローダSystemjsを使用する必要があります。これを見てくださいLazy loading example

ダイナミックにコンポーネントをロードするには、例のように仮想プロキシを使用できます。

directives: [componentProxyFactory({'compName':'CustomHeroDetailComponent'})], 

と仮想プロキシのための -

export class ComponentProvider { 
    compName:string; 
} 

export class ComponentDetail { 
    path: string; 
    name: string; 
} 

@Injectable() 
export class DynamicComponentLoaderService 
{ 
    //implement component lookup logic 
    getComponentDetail(compName: string):ComponentDetail{ 
     return {'path':'./path/to/comp/custom.herodetail.component', 'name':'CustomHeroDetailComponent'}; 
    }  
} 

export function componentProxyFactory(provider: ComponentProvider): Type { 
    @Component({ 
     selector: 'component-proxy', 
     template: `<span #content></span>`, 
     providers: [provide(ComponentProvider, { useValue: provider})] 
    }) 
    class VirtualComponent { 
     constructor(el: ElementRef,loader:DynamicComponentLoader, inj:Injector, _service: DynamicComponentLoaderService, provider:ComponentProvider) 
     { 
      var compDetail = _service.getComponentDetail(provider.compName); 
      System.import(compDetail.path) 
       .then(m => { 
        loader.loadIntoLocation(m[compDetail.name], el, 'content'); 
       }); 
     } 
    } 
    return VirtualComponent; 
} 

希望これは、あなたが探しているものです。

Answer 2

このAFAIKの直接的なサポートはありません。 下敷きの問題はhttps://github.com/angular/angular/issues/5622と同じです。

考えられる回避策として、すべてのコンポーネントとそこからインポートするコンポーネントソースファイルをエクスポートするファイルを作成できます。 次に、このエクスポートファイルを置き換えてバインディングを変更できます。

すべてのコンポーネントがそのグローバルファイルに依存して起動するので、醜いです。

Answer 3

次のコードを使用してください。

import {HeroDetailComponent} from './hero-detail.component'; 


     @Component({ 
      selector: 'custom-hero-detail', 
      template:` 
      <hero-detail param="..."> 
      `, 
      directives: [HeroDetailComponent], 
     }) 
     export class CustomHeroDetailComponent extends HeroDetailComponent{ 
      // custom code. 
     } 

コンポーネントを拡張し、その中でそのディレクティブを使用することができます。