ng- ionic 3.20.0中侧菜单的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帖子等中找到的十几个其他变体(当然，我分别尝试了它们)。我尝试使用头文件中的标签，但没有使用。我也尝试过将内容包装在标签中。似乎什么都不起作用。有没有人能告诉我在这种情况下什么才是有效的呢？
也许我走错了方向，我应该考虑制作一个自定义菜单组件？
蒂娅，迈克
回答 1
Stack Overflow用户
发布于 2018-06-03 03:13:53
多亏了Suraj Rao，我才能想出这个，这是公认的最简单的解决方案。
`离子生成组件自定义菜单‘
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() {
}
}html中的{{pagetitle}}和@input pagetitle: string用于将数据传递到组件中。再说一次，最简单的方法。当您创建第一个组件时，将创建一个components.module.ts文件，并且您创建的组件将导入到该文件中。由于我在组件中使用了离子项，因此我必须将IonicModule的导入添加到该模块中。将其添加到import语句的顶部和@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中工作的所有最基本的部分:)
麦克
https://stackoverflow.com/questions/50652978
复制相似问题