Angular2 Web 与 Mobile TemplateURL

Question

我想为我网站的 Web 版本和移动版本重复使用组件。网站千差万别，所以响应式设计是不可行的。

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

示例：

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

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

Answer 1

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

您可以创建一个可重复使用的 class，您的不同组件将继承：

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 方法和属性。

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

Answer 2

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

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

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

Angular2 Web 与 Mobile TemplateURL

Angular2 Web vs Mobile TemplateURL

mobile-website

responsive-design

web

angular