Angular2 WebとMobile TemplateURL

Question

ウェブ版のウェブ版とモバイル版のコンポーネントを再利用したいと思います。ウェブサイトは大きく異なっているため、反応性の高いデザインは実現不可能です。

理想的には、画面の解像度に基づいて複数のtemplateUrlを提供する方法がありますが、このようなものは存在しません。

例：

@Component({ 
    selector: 'multiplatform-component', 
    templateUrl-sm: 'app/sm.html', 
    templateUrl-md: 'app/md.html', 
}) 

これにアプローチする最良の方法は何ですか？

Answer 1

あなたはtemplateURLの解決にグローバル関数を作成することができます。[ここでの問題を参照してください]（https://github.com/angular/angular、将来的にはこの機能のためのプラットフォームのサポートがあるように起こって

function getTemplateURL(url:string){ /* check browser, etc. */ }; 

@Component({ 
    selector: 'multiplatform-component', 
    templateUrl: getTemplateURL('app/sm.html') 
}) 

Answer 2

コンポーネントの再利用可能な部分は通常、そのクラスに属します。

あなたのさまざまなコンポーネントが継承することを、再利用可能なクラスを作成することができます。

export class ReusableClass{ 
} 

@Component({ 
    selector: 'platform1', 
    templateUrl: 'platform1.html', 
}) 
export class Platform1 extends ReusableClass{ 
} 

@Component({ 
    selector: 'platform2', 
    templateUrl: 'platform2.html', 
}) 
export class Platform2 extends ReusableClass{ 
} 

すべてReusableClassのメソッドとプロパティは、Platform1とPlatform2コンポーネントへのアクセスである可能性があります。

セレクタとテンプレートのみが異なります。