Criação de Sites, Manutenção de Sites e Links Patrocinados - Appear Web

Como abrir url externa no Ionic 4?

Ionic 4: Saiba qual e como utilizar o plugin para abrir url externa

Atualizado: 21/04/2020 - 09:04 | Cadastrado: 21/04/2020 - 08:04
Compartilhe

Para abrir url externa no Ionic 4 é necessário o plugin inappbrowser, confira abaixo as linhas de comando:
ionic cordova plugin add cordova-plugin-inappbrowser
--save npm install --save @ionic-native/in-app-browser

Depois de instalados é necessário importar o plugin no arquivo app.module.ts utilizando a linha de comando abaixo:
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

No mesmo arquivo, é necessário adicionar InAppBrowser na linha providers, exemplo:
providers :[ InAppBrowser, ...]

No modulo page que você vai utilizar o função, é necessário importar plugin utilizando a linha abaixo, veja que agora também podemos utilizar o InAppBrowserOptions:
import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';

Após a importação, é necessário adicionar o modulo no método constructor:
constructor(private theInAppBrowser: InAppBrowser) {}

Antes do constructor criei o atributo options conforme as linhas abaixo, esse atributo serve para configurar o link que será aberto. 
options : InAppBrowserOptions = {
    location : 'yes',//Or 'no'
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',//Android only ,shows browser zoom controls
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only
    toolbar : 'yes', //iOS only
    enableViewportScale : 'no', //iOS only
    allowInlineMediaPlayback : 'no',//iOS only
    presentationstyle : 'pagesheet',//iOS only
    fullscreen : 'yes',//Windows only    
};

Abaixo um exemplo do método utilizando o plugin, é necessário passar a url completa que quer abrir e definir o target, no caso será _blank, olha o exemplo:
openUrlExterna(url : string){
    let target = "_blank";
    this.theInAppBrowser.create(url,target,this.options);
}

Imaginando um exemplo, no module page utilizando um button, poderia ser passado da seguinte maneira:
<ion-button on-click="openUrlExterna(http://www.appearweb.com.br/)">Acessar Link</ion-button>

Nos ajude curtindo ou compartilhando esse conteúdo, sucesso!

imagem do e-book grátis full-strack

[GRÁTIS] Guia Completo Para Se Tornar um(a) Desenvolvedor(a) Full-Stack: HTML, CSS, JS, Node, Angular e PHP!

Acesse Aqui
imagem do e-book grátis full-strack

[GRÁTIS] Viver de Negócios Online, Guia Completo Para Iniciar No Mercado Digital!

Acesse Aqui
imagem Projeto 1.0: Botão Gerenciável do Whatsapp

[GRÁTIS] Está Apreendendo HTML, CSS, PHP ou MySQL? Projeto 1.0: Botão Gerenciável do Whatsapp

Acesse Aqui

Desenvolvimento Ionic: Posts Relacionados

Appear Web - Criação de sites e links patrocinados - 2020