javascript - 有一个可变的 templateUrl

Question

这个问题已经有答案了:

Dynamic template URLs in Angular 2 (10 个回答)

已关闭 6 年前。

我想知道是否可以制作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

除了评论中提供的建议之外，您还可以创建自己的结构指令并根据条件加载/卸载不同的布局。例如，看一下这个示例，其中的选项是检查设备是 iOS 还是 Android 设备，并根据操作系统加载不同的布局:

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 部分:

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

完整示例可以在 here 找到