728x90
[home.page.html]
<ion-header> <ion-toolbar> <ion-title> open_page </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-button (click)="openWebpage()">open_page</ion-button> </ion-content>
[home.page.ts]
import { Component } from '@angular/core'; import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser/ngx' @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(private iab: InAppBrowser,) {} openWebpage(){ const url = 'https://www.google.co.kr/'; const options: InAppBrowserOptions = { zoom: 'yes' } //opening a URL and returning an InAppBrowserObject const browser = this.iab.create(url,'_self',options); } }
[app.module.ts]
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; //in-app-browser import import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, InAppBrowser, //add ], bootstrap: [AppComponent] }) export class AppModule {}
[결과]
open_page라는 파란 버튼을 클릭하면
구글 사이트가 나타난다.
* 혹시 버튼을 클릭하지 않고 바로 웹사이트를 띄울 수 있는 방법을 아시는 분은 댓글 부탁드려요!!
※ 제 글이 도움이 되었다면 공감 부탁드려요 :)
반응형
'안드로이드' 카테고리의 다른 글
[ ionic ] 안드로이드 스튜디오 시뮬레이터(avd)에 띄우기 (0) | 2020.07.23 |
---|---|
윈도우에 gradle 설치하기 (0) | 2020.07.23 |
하이브리드 앱 강좌 추천 (0) | 2020.07.21 |
current weather .org - API키 얻는 법 (0) | 2020.07.17 |
expo install expo-location 에러 (2) | 2020.07.17 |