Angular2 Web与移动模板URL

Question

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

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

示例：

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

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

Answer 1

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

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

然后，Platform1和Platform2组件可以访问所有ReusableClass方法和属性。

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