変更可能なテンプレートURLがあります

Question

templateUrlをifelseに依存させることが可能かどうか疑問に思っています。

import { Component } from "@angular/core"; 

@Component({ 
    selector: "grote-kerk", 
    templateUrl: "pages/home/home.html" 
}) 
export class AppComponent { 
    // Your TypeScript logic goes here 
} 

Answer 1

別にコメントで提供の提案から、あなたはまた、独自の構造的なディレクティブをクレタ島と異なるレイアウトをロード/アンロードするための条件に基づくことができます。

import { Component, Directive, ViewContainerRef, TemplateRef, Inject } from "@angular/core"; 
import { Device, platformNames } from "platform"; 
import { DEVICE } from "nativescript-angular/platform-providers"; 

@Directive({ selector: "[sdkIfAndroid]" }) 
export class IfAndroidDirective { 
    constructor(@Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) { 
     if (device.os === platformNames.android) { 
      container.createEmbeddedView(templateRef); 
     } 
    } 
} 

@Directive({ selector: "[sdkIfIos]" }) 
export class IfIosDirective { 
    constructor(@Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) { 
     if (device.os === platformNames.ios) { 
      container.createEmbeddedView(templateRef); 
     } 
    } 
} 

@Component({ 
    moduleId: module.id, 
    templateUrl: "./create-custom-directive.component.html", 
}) 
export class CreateCustomDirectiveExampleComponent { 
} 

そして、ディレクティブが使用されているHTML部分： は、例えばcontionは、デバイスがiOS版やAndroid 1かどうかをチェックし、OSに応じて、異なるレイアウトをロードして、このサンプルを見てみましょう

<GridLayout *sdkIfAndroid width="300" height="300" backgroundColor="#a4c639"></GridLayout> 
<GridLayout *sdkIfIos width="300" height="300" backgroundColor="#0099CC"></GridLayout> 

全例を見つけることができるhere