ng-include 用于 ionic 3.20.0 中的侧边菜单答案

【问题标题】：ng-include for sidemenu in ionic 3.20.0ng-include 用于 ionic 3.20.0 中的侧边菜单
【发布时间】：2018-11-12 03:49:56
【问题描述】：

我一直在尝试弄清楚如何在不复制和粘贴的情况下重复使用不同页面中的项目。我想我会从一些简单的事情开始，并将标题菜单设置为一个单独的文件，我可以 ng-include。我几乎不知道...这是 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 帖子等中发现的十几个其他变体（当然，我分别尝试了它们）。我用头文件中的标签试过了，没有。我也尝试将内容包装在标签中。似乎没有任何效果。谁能告诉我在这种情况下什么对他们有用？

也许我走错了方向，我应该考虑制作一个自定义菜单组件？

蒂亚，迈克

【问题讨论】：

ng-include 是一个 angularjs 功能.. ionic 3 使用 angular 4+ stackoverflow.com/questions/39328215/…
谢谢。您的链接正是我所需要的。我利用了标题的简单答案，但是随着事情的增加，更复杂的动态创建动态组件将很有用。

标签： angular ionic-framework ionic3 angularjs-ng-include

【解决方案1】：

感谢 Suraj Rao，我能够想出这个，公认的最简单的解决方案。

`离子生成组件自定义菜单'

自定义菜单.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>

自定义菜单.ts：

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

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

export class CustomMenuComponent {

   @Input() pagetitle: string;

   constructor() {
   }
}

html 中的{{pagetitle}} 和@input pagetitle: string 用于向组件传递数据。再次，最简单的方法。当您创建第一个组件时，将创建一个 components.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>

这就是使组件在 ionic 3.20 中工作的所有最小部分:)

迈克

【讨论】：