Question

如果用户来自移动设备，我需要替换不同的模板，如果是网络，则需要替换另一个模板。

如何在Angular中动态更改模板？

我在这里回顾了几个相同的问题，但它们都是关于Angular JS

Answer 1

您可以为此使用ng-template。看起来像这样： ... ... 对于isWeb（）实现，我将使用navigator.userAgent，请参阅如何在桌面和移动Chrome用户代理之间进行检测？这样，当您在移动设备上时，它将在ng-template中显示内容，否则将在ng-container中显示内容。

Answer 2

您可以使用ngTemplateOutlet进行此操作：

在您的HTML中：

<ng-container [ngTemplateOutlet]="getTemplate">

</ng-container>

<div>
  <button (click)="changeTemplate()"> Change Template </button>
</div>


<ng-template #webTemplate>
   <h3> Hey, I'm web template</h3>
</ng-template>
<ng-template #mobileTemplate>
  <h3> Hey, I'm mobile template</h3>
</ng-template>

在您的组件中：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('mobileTemplate') mobileTemplate: TemplateRef<any>;
  @ViewChild('webTemplate') webTemplate: TemplateRef<any>;
  web: boolean;
  name = 'Dynamic Temmplates';
  constructor() {
    this.web = true;
  }
  get getTemplate() {
    if (this.web) {
      return this.webTemplate;
    }
    else {
      return this.mobileTemplate;
    }

  }

  changeTemplate() {
    this.web = !this.web;
  }
}

您可以找到 stackblitz 演示here

有关NgTemplateOutlet here

的更多信息

如何在Angular中动态更改模板？

2 个答案: