Angular2 Web与移动模板URL

我想为我的网站的web版本和移动版本重用组件。这些网站差别很大，因此响应性设计是不可行的

理想情况下，会有一种基于屏幕分辨率提供多个TemplateURL的方法，但我认为不存在类似的情况

例如：

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

---

最好的方法是什么

组件的可重用部分通常位于其类中

您可以创建一个可重用类，您的不同组件将继承该类：

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{
}

所有可重用类方法和属性都可以被

Platform1

和

Platform2

组件访问

---

只有选择器和模板不同。

您可以创建全局函数来解析

模板URL

s:

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

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

---

将来将有平台支持此功能。因此，在充分尊重给出的答案的情况下，我鼓励你现在不要花太多时间来实现这个目标。这似乎不起作用。静态解析符号值时遇到错误，我得到

ERROR。对非导出函数的引用（原始.ts文件中的位置6:10）