用于网络和移动设备的 Ionic Angular 不同的 html 视图

Question

我开始使用 Ionic 构建移动和网络应用。 使用 Ionic 组件，移动版看起来不错，但我不能对网页版说同样的话。 所以我想知道是否可以使用具有两个不同模板的组件： 一种用于移动版本（使用所有 ionic 组件），另一种用于网络版本（使用经典的 html 标签）。 我会避免使用*ngIf == isMobile() 和*ngIf == isWeb() 或类似的东西创建一个大模板。 有人知道一些好的做法吗？

Answer 1

您可以使用 ng-container 和 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
   } 
}