Ionic 2自定义功能,可在Segments中使用地图

时间:2016-08-24 14:18:29

标签: angular ionic-framework ionic2

我正在尝试使用离子2创建一个App。我想用地图和列表创建2个段。试图按照以下链接

Angular2 calling custom function after ngSwitch new view is created

但从来没有让它成功。我认为我的.scss文件无法识别在html文件中创建的ID。以下是我的HTML代码:

 <ion-segment [(ngModel)]="clients" >
      <ion-segment-button value="map">
        Map
      </ion-segment-button>
      <ion-segment-button value="list">
        List
      </ion-segment-button>
    </ion-segment>
      </ion-navbar>
</ion-header>

<ion-content >
  <div [ngSwitch]="clients">
  <div *ngSwitchCase="'map'">
    <div class="map" >
        <div #map id="map"></div>
    </div>
    </div>
    <ion-list *ngSwitchCase="'list'">
      <ion-item>
        <h2>Item 1</h2>
      </ion-item>    
     </ion-list>

  </div>
</ion-content>

1 个答案:

答案 0 :(得分:0)

将.scss文件中的类名添加到ion-content标记。

例如,在.scss文件中,如果基类是home,请在html代码中的ion-content中添加该类,如下所示:

SELECT coast, SUM(sale_cnt) AS count, COUNT(*) AS total_count
FROM T LEFT JOIN
(SELECT sale_state,
CASE 
WHEN sale_state IN ('CA','WA','OR') THEN 'West'
WHEN sale_state IN ('NY','VA','MA','FL') THEN 'East' END AS coast,
CASE
WHEN sale_count > 100 THEN 1
ELSE 0 END AS sale_cnt
FROM T) C
ON T.sale_state = C.sale_state
GROUP BY coast