Categorias
iiiiii
Abrir navegador con cordova ionic 7
Descripcion
recurso: https://ionicframework.com/docs/v5/native
Nota
PARA CORDOVA
1. npm install cordova-plugin-inappbrowser --instaalar el plugin de cordova
2. npm install @awesome-cordova-plugins/in-app-browser -- instalar las librerias de angular ionic para appbrouser
3. importar el objeto en mains.js en los providers
4. importar el objeto en el componente donde se va utilizar.
html
asads
typescript
Paso 3
/**INICIO ***********************************MAIN.TS**********************/
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import {HttpClientModule} from '@angular/common/http';
import {InAppBrowser} from '@awesome-cordova-plugins/in-app-browser/ngx'; -- se importa el plugins para inyectarlo en los proveedores
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent, {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
importProvidersFrom(IonicModule.forRoot({}),HttpClientModule),
provideRouter(routes),InAppBrowser <======Aqui se importo el nuevo plugin
],
});
/*FIN ***********************MAIN.TS****************************/
Paso 4
/**INICIO MI COMPONENTE.TS************************************************************************/
import { CommonModule } from '@angular/common';
import { Component, OnInit ,Input} from '@angular/core';
import { IonicModule } from '@ionic/angular';
import {InAppBrowser} from '@awesome-cordova-plugins/in-app-browser/ngx'; /*Aqui se importa el plugin para usarlo*/
@Component({
selector: 'app-micomponente',
templateUrl: './micomponente.component.html',
standalone :true,
imports: [IonicModule,CommonModule],
styleUrls: ['./micomponente.component.scss'],
})
export class MicomponenteComponent implements OnInit {
url:string='' ;
constructor(private minavegador:InAppBrowser) { } //qui se inyecta creadno una variable del tipo del plugin (minavegador)
ngOnInit() {
}
onClick (){
this.minavegador.create('http://www.tecnolobo.com/editarCodigo/2399').show; /*Aqui se llama la pagina*/
}
}
/**FIN MICOMPONENTE.TS****************************************************************************/