Angular2 Web vs Mobile TemplateURL

Question

Je souhaite réutiliser des composants pour une version web de mon site web ainsi qu'une version mobile. Les sites Web sont très différents, de sorte que la conception réactive n'est pas réalisable.

Idéalement, il y aurait un moyen de fournir plusieurs templateUrls basés sur la résolution de l'écran, mais je ne pense pas que quelque chose comme ça existe.

Exemple:

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

Quelle est la meilleure façon d'aborder ce sujet?

Answer 1

Vous pouvez créer fonction globale pour résoudre templateURL s:

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

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

Answer 2

La partie réutilisable d'un composant réside habituellement dans sa catégorie.

Vous pouvez créer une classe réutilisable, que vos différents composants hériteraient:

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

Toutes les méthodes de ReusableClass et les propriétés pourraient alors être accessibles aux composants Platform1 et Platform2.

Seuls les sélecteurs et les gabarits sont différents.