javascript - Angular从html中的控件获取值

Question

我有一个在 map View 和 ListView 之间切换的按钮

<ion-content>
  <ion-segment #viewController (ionChange)="changeViewState($event)">
      <ion-segment-button value="map">
        <ion-label>Map</ion-label>
      </ion-segment-button>
      <ion-segment-button value="list">
        <ion-label>List</ion-label>
      </ion-segment-button>
    </ion-segment>
  <app-list-base *ngIf="viewValue == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>
  <app-map *ngIf="viewValue == 'map'" [config]="config"></app-map>
</ion-content>

目前我正在使用 ionChange 事件来设置 viewValue。但是，鉴于我只需要来自控件的原始值，我想知道是否有一种更简单的方法可以仅在 html 中执行此操作

例如

<app-list-base *ngIf="#viewController.val == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>

如何通过html获取viewController的值？

Answer 1

是 *ngIf="viewController.value" 没有 # 但 Angular 的方式是使用 [(ngModel)] - 甚至是 ReactiveForms-

<ion-segmen [(ngModel)]="myvariable">
...
<ion-segmen>
<app-list-base *ngIf="myvariable">

其中“myvariable”是您的 .ts 中的一个变量

注意:目前，Ionic Framework 已与 Angular 正式集成，因此，您可以使用您对 Angular 的所有了解。好吧 Ionic 具有某些特性，但是实现了模型 View 的想法

注意 2:我真的认为文​​档中的所有示例都需要重新访问