Question

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

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

示例：

@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

组件的可重用部分通常驻留在其类中。

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

$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});

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

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

Angular2 Web与移动TemplateURL

2 个答案: