ng-include для sidemenu в ионном 3.20.0 - PullRequest
Новая
       22

ng-include для sidemenu в ионном 3.20.0

0 голосов
/ 02 июня 2018

Я пытался понять, как повторно использовать элементы на разных страницах без их копирования и вставки.Я подумал, что начну с чего-то более простого и сделаю меню заголовков отдельным файлом, который я добавлюМало ли я знал ... вот файл header.html: 

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
     <ion-icon name="menu"></ion-icon>
    </button>
  <ion-title>List</ion-title>
 </ion-navbar>
</ion-header>

Фреймворк был сделан с ionic start sample-app sidemenu.Файл header.html находится в папке / pages / common /.Чтобы включить это, я попробовал все это. 

<ion-header ng-include="'header.html'">
</ion-header>

<ion-header ng-include="'../common/header.html'">
</ion-header>

<ion-header ng-include="'pages/common/header.html'">
</ion-header>

<ion-header ng-include src="'pages/common/header.html'">
</ion-header>

<ion-header>
  <div ng-include src="'pages/common/header.html'"></div>
</ion-header>

<ion-header>
  <div ng-include="" src="'pages/common/header.html'"></div>
</ion-header>

и, возможно, дюжину других вариантов, которые я нашел в разных документах, блогах, SO сообщениях и т. Д. (Я пробовал их отдельно, конечно).Я пробовал это с тегом в заголовочном файле и без.Я также попытался обернуть содержимое в теги.Ничто не похоже на работу.Кто-нибудь может сказать мне, что работает для них в этом сценарии?

Возможно, я иду в неправильном направлении, и я должен смотреть на создание пользовательского компонента меню?

TIA, Майк

1 Ответ

0 голосов
/ 02 июня 2018

Благодаря Сураю Рао я смог придумать это, самое простое решение.

`ионное генерирование компонента custom-menu '

custom-menu.html: 

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pagetitle}}</ion-title>
  </ion-navbar>
</ion-header>

custom-menu.ts: 

import { Component, Input } from '@angular/core';

@Component({
   selector: 'custom-menu',
   templateUrl: 'custom-menu.html'
})

export class CustomMenuComponent {

   @Input() pagetitle: string;

   constructor() {
   }
}

{{pagetitle}} в html и @input pagetitle: string используются для передачи данных в компонент.Опять самый простой способ.При создании самого первого компонента будет создан файл component.module.ts, и созданный вами компонент будет импортирован туда.Поскольку я использовал ионный элемент в компоненте, мне пришлось добавить импорт IonicModule в этот модуль.Добавьте его вверху в операторе импорта и в массиве импорта в @ NgModule

components.mdoule.ts: 

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular'; // ADDED THIS
import { CustomMenuComponent } from './custom-menu/custom-menu';
@NgModule({
   declarations: [CustomMenuComponent],
   imports: [IonicModule], // AND THIS
   exports: [CustomMenuComponent]
})
export class ComponentsModule {}

Это компонент меню, и я хочу, чтобы он был доступенсо всех страниц, поэтому я импортирую его в app.module.ts 

import { ComponentsModule } from '../components/components.mdoule';

@NgModule({
   declarations: [... declarations already there ],
   imports: [
      BrowserModule, 
      ... // other modules already there
      ComponentsModule
   ],

Итак, он доступен для всех страниц, и мне просто нужно вставить это в верхней части HTML 

<custom-menu pagetitle="Hello World Page"></custom-menu>

Это все минимальные части для работы компонента в ионном 3.20:)

Майк

...