Nuevo Template

Para crear un nuevo template hay que crear un nuevo directorio en la carpeta src/routes, con el nombre que se le asignará al template que se quiera crear. A continuación, en el nuevo directorio se crea un index.js y un html con el nombre del template.

En el template.html se incluirá el código de ionic con sus componentes y código html. Los componentes de ionic son los que utilizan las etiquetas <ion>.

En el index.js se incluirá el código javascript con las instrucciones para ejecutar el html del template. Si este template utiliza un mapa, contendrá en el js: Una clase view que englobará todo el código que creemos de javascript. Este view es necesario para luego poder mostrarlo en el menú.

export default class ViewTemplate extends HTMLElement {
  ...
}

El constructor:

constructor() {
  super()
  this.sizeObserver = new ResizeObserver(() => {
    if (this.olMap) {
      this.olMap.updateSize()
    }
  })
}

El connectedCallback() en el que se crea el mapa:

this.mMap = new M.map({
  container: 'map',
  controls: ['scale'],
})
this.olMap = this.mMap.getMapImpl()
this.sizeObserver.observe(this)

Para mostrar el nuevo template en nuestra aplicación, hay que introducir el view que se ha creado en el js. Lo introduciremos en la ruta src/index.html y src/index.js Comenzaremos introduciendo el código del src/index.html en el que introduciremos el route del nuevo template indicando en la url /nombre_template y en component se asignará el nombre que utilizaremos para llamar a ese ion-route. En este caso se utilizará el nombre del view que creamos en el javascript, ViewTemplate, para saber qué view vamos a utilizar, pero con un guion en medio para que no se confunda con el componente que creamos anteriormente.

<ion-route url="/ template " component="view-template"></ion-route>

Luego en el ion-menu-toggle se crea un nuevo ítem, en el que se introduce en el href la ruta donde se encuentra el template, un icono que se mostrará al lado del nombre en el menú lateral y por último el nombre que queramos mostrar que se corresponderá al template creado.

<ion-item href="template">
  <ion-icon name="nombre_icono" slot="start"></ion-icon>
  <ion-label>Template </ion-label>
</ion-item>

Para finalizar pasamos al src/index.js en el que importamos el view que creamos anteriormente en el index.js del template indicando la ruta de dicho js y se define el elemento (route, components)

import ViewTemplate from './routes/template'

El route corresponde al component="view-template" que se creó en el ion-route del src/index.html y el components es el view que se creó en el index.js del template.

window.customElements.define('view-template ', ViewTemplate)