Ionicでよく使うものについて、忘備録を兼ねてまとめました。inputやボタンなどの部品の作成方法やTipsなどを記載しています。
Observableなオブジェクトの作成
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
・
・
constructor(
private client:HttpClient
) { }
・
・
devTestObservable(myStr):Observable<any> {
return new Observable(observer => {
setTimeout(() => {
observer.next(myStr+'myObservable');
}, 1000);
})
}
devTestPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('myPromise');
}, 1000)
})
}
devTestHttp():Observable<any> {
return new Observable(observer => {
this.client.get('/assets/data/test.json').subscribe(e =>{
observer.next(e);
})
})
}
import { DataService } from '../tabs/data.service';
import { HttpClient } from '@angular/common/http';
・
・
constructor(
private dataService:DataService,
private client:HttpClient,
) {
this.myStr = 'first ';
}
・
・
async onButtonClick(){
this.dataService.devTestHttp().subscribe(e =>{
console.log(e,'Hi');
this.myStr = e.authAdmin.linkLoginButton+'Hi';
})
this.dataService.devTestObservable().subscribe(e =>{
console.log(e);
})
this.dataService.devTestPromise().then(e =>{
console.log(e);
})
}input
<ion-item lines='full'>
<ion-label position='floating'>らべる</ion-label>
<ion-input type='text'></ion-input>
</ion-item>
inputには、最初にplaceholderが表示されていて、フォーカスをあてるとplaceholderのラベルが左上に移動するものが一番いいです。
こんな感じになります。
フォーカス前
フォーカス後
ボタン
横いっぱいに広がったよく見るボタンが表示されます。クリック時の関数は(click)＝で指定します。
<div>
<ion-button expand='block' (click)="someFunc()">Button</ion-button>
</div>
新しい部品をつくる
ionic g
とだけ入力すれば、下記の選択肢を表示してくれます。
ABOUT ME
