Cargar página maquetada html ionic

Cargar página maquetada html ionic

mediante un Provider he creado un array de elementos:
this.arrLista = [
                  {
                    titulo: 'Pagina 1',
                    ruta: 'templates/paginaUno.html',
                    icono: 'assets/imgs/imagenUno.jpeg'
                  },
                  {
                   titulo: 'Pagina 2
                   ruta: 'templates/pagDos.html',
                   icono: 'assets/imgs/imgDos
                 }, 
                 {
                   titulo: 'Pagina 3
                   ruta: 'templates/pagTres.html',
                   icono: 'assets/imgs/imgTres.jpeg'
                 }
                 ]

Siendo:

titulo: el titulo a buscar
ruta: donde tengo en mi proyecto el archivo físico
icono: la imagen a mostrar en la Lista

El cual es llamado mediante un searchBar y localizado por el arrLista.titulo.
Me gustaría que mediante un onclick al elemento me abriera en una vista el contenido del html y cuya ruta de acceso está almacenado en arrLista.ruta.
Es posible? Qué puedo hacer?
Muchas gracias.

Solutions/Answers:

Answer 1:

Es posible y es relativamente sencillo:

Mediante AJAX obtienes el html:

text: string;

onClick(ruta: string) {

    this.httpClient.get(ruta, { responseType: 'text' })
            .subscribe(data => this.text = data);
}

Y ese texto lo muestras así:

<div [innerHTML]="text"></div>

Nota:

Esta solución funciona usando Angular en una aplicación web, al ser Ionic los assets posiblemente puedan ser accedidos de otro modo, sin requerir una llamada AJAX, ya que deberían estar como parte de la aplicación en el dispositivo móvil.

Answer 2:

puedes usar el componente “modal” de semantic-ui, que es como boostrap, sólo que usa jquey para sus componentes.

y con (click) le pasas una función que dispare el modal.

pasa en la función la url

semantic también tiene un panel lateral.

espero te sirva

References

Loading...