Angular 为web和移动设备提供不同的html视图

我开始玩Ionic，为手机和网络开发应用程序。 使用离子组件，移动版看起来不错，但我不能说网络版也一样。 所以我想知道是否可以使用具有两个不同模板的组件： 一个用于移动版本（使用所有ionic组件），一个用于web版本（使用经典html标记）。 我会避免创建带有

*ngIf==isMobile（）

和

*ngIf==isWeb（）

或类似内容的大模板。

---

有人知道一些好的做法吗？

您可以将ng容器与ngTemplateOutlet一起使用

模板（home.Template.html）：

<ng-template #desktopElem>Here is the HTML Block for Desktop</ng-template>
<ng-template #mobileElem>Here is the HTML Block for Mobile</ng-template>

<ng-container *ngTemplateOutlet="isMobile ? mobileElem : desktopElem"></ng-container>

@Component({
   selector: 'home',
   templateUrl: 'home.template.html'
})
export class HomeComponent implements OnInit{
   isMobile;

   ngOnInit(){
      this.isMobile = // use regex in browser-useragent to diff b/w mobile and desktopn
   } 
} 

---

您可以将ng容器与ngTemplateOutlet一起使用来实现

模板（home.Template.html）：

<ng-template #desktopElem>Here is the HTML Block for Desktop</ng-template>
<ng-template #mobileElem>Here is the HTML Block for Mobile</ng-template>

<ng-container *ngTemplateOutlet="isMobile ? mobileElem : desktopElem"></ng-container>

@Component({
   selector: 'home',
   templateUrl: 'home.template.html'
})
export class HomeComponent implements OnInit{
   isMobile;

   ngOnInit(){
      this.isMobile = // use regex in browser-useragent to diff b/w mobile and desktopn
   } 
}