Angular2 Web 与移动 TemplateURL答案

【问题标题】：Angular2 Web vs Mobile TemplateURLAngular2 Web 与移动 TemplateURL
【发布时间】：2016-08-08 04:58:45
【问题描述】：

我想为我的网站的网络版本和移动版本重复使用组件。网站差异很大，因此响应式设计不可行。

理想情况下，有一种方法可以根据屏幕分辨率提供多个 templateUrls，但我认为不存在这样的东西。

例子：

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

解决此问题的最佳方法是什么？

【问题讨论】：

未来会有平台支持这个功能，see issue here。因此，在充分尊重给出的答案的情况下，我鼓励您不要现在花太多时间来实施它。

标签： web responsive-design angular mobile-website

【解决方案1】：

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

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

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 组件可以访问所有 ReusableClass 方法和属性。

只有选择器和模板会有所不同。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这似乎不起作用。我得到ERROR in Error encountered resolving symbol values statically. Reference to a non-exported function (position 6:10 in the original .ts file)