角度1.5+のコンポーネント - templateUrl関数の内部でのバインディングを使用

Question

とTypescriptを使用しています。Angular 2と互換性があるようにコードを準備しています。多くのコンポーネントが、アプリケーション全体のリポジトリロケーションを、templateUrlプロパティにマップされたビューに使用する必要がある状況がありますが、時にはビューには特定のローカル実装が必要です。

通常、ビューは高速配信のCDNでホストされ、同じ一般的なコードベース、APIなどに属する複数のサイト間で再利用されます。繰り返す必要のないものを集中化する。

まれに、この動作を無効にして、より細かく微調整したビューを使用する必要があります。そこで私のアプローチはbindingをviewLocationというコンポーネントに追加して、このように使用することを意図していました。

<component-name></component-name>がデフォルトです。この場合、デフォルトのCDNパスが使用されます。 <component-name view-location="local"></component-name>は固有の状況です。この場合、templateUrlはそれに応答し、CDNからではなく特定のアプリケーションに関連するパスに切り替えることができます。

ここで実証されているように、実際のコンストラクタまたはtemplateUrl関数内のバインディングプロパティにアクセスできないことがわかってから、かなり簡単になると思いました。

export class SidebarComponent extends Component { 
    constructor() { 
     super(); 
     this.bindings = { viewLocation: '=' }; 
     // other properties 
     this.templateUrl = ($someService: IServiceInterface): string => { 
     // help! I don't have access to the viewLocation property! 
     } 
    } 
} 

そのプロパティにアクセスするために他に何かできますか？

Answer 1

これはTSでは行われませんが、注入可能なテンプレートを使用している場合、AngularJS 1.5コンポーネントは一般に$ injectorに$ elementと$ attrsを提供します。

これは、テンプレートのURLをコンポーネントに設定された属性に基づいて選択されますJavascriptを使用してAngularJS例である：

angular.module('example', []); 

angular.module('example').component('myComponent', { 
    templateUrl: function($element, $attrs, $log) { 

    $log.info('determining template to be used'); 

    if($attrs.useTemplate) { 
     return $attrs.useTemplate; 
    } 

    return 'default.html'; 
    } 
}); 

テンプレートスニペット：

<my-component use-template="hui.html"></my-component> 
<my-component use-template="bu.html"></my-component> 
<p></p> 
<my-component></my-component> 

の作業例： template injection in an angular 1.5 component