问题:

I'd like to reuse components for a web version of my website as well as a mobile version. The websites are vastly different so responsive design is not feasible.

Ideally, there would be a way to provide multiple templateUrls based on the screen resolution, but I don't think something like this exists.

Example:

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

What is the best way to approach this?

回答1:

You could create global function to resolve templateURLs:

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

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

回答2:

The reusable part of a component usually resides in its class.

You could create a reusable class, that your different components would inherit:

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

All the ReusableClass methods and properties could then be accessible to the Platform1 and Platform2 components.

Only the selectors and templates would differ.