Question

输出示例：output

在“进一步模块”功能中，“环境合规管理”主模块下有两个子模块，即“化学管理”和“ PPE管理”，因此，当用户单击“化学管理”时，应转到新页面，而当用户单击“ PPE管理”时，应该转到另一页。我不知道该怎么做。我真的需要帮助。

home.html code:

<ion-content class="outer-content">
  <ion-card>
    <ion-card-header>
      {{content}}
    </ion-card-header>
    <ion-card-content>
      <ion-segment [(ngModel)]="content" color="dark">
        <ion-segment-button value="Environment Compliace Management">
          <ion-icon name="flask"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="Health & Safety Management">
          <ion-icon name="medkit"></ion-icon>
        </ion-segment-button>
      </ion-segment>
      <ion-list style="margin: 0" inset>
        <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
          <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
        </button>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

home.ts code:


import {Component} from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '@angular/compiler';

@Component({
  templateUrl: 'home.html'
})
export class HomePage{
  content="MODULES";
  constructor(public navCtrl: NavController, public navParams: NavParams) {}


  items: any = {
    'Environmental Compliance Management': [
      {
        name: 'Chemical Management',
        icon: 'nuclear',
      },

      {
        name: 'PPE Management',
        icon: 'man'
      }
    ],
    'Health & Safety Management': [
      {
        name: 'Emergency Incident Management',
        icon: 'alert'
      },
      {
        name: 'Machinery Management',
        icon: 'construct'
      },
      {
        name: 'Risk Management',
        icon: 'cog'
      }
    ]
  };
  getContentItems(type:any){
    return this.items[type];
  }
  furtherModules(){
  }
}

Answer 1

首先需要确定我们要定向到的页面，例如，在我的示例中，我生成了一个虚拟页面“ MyAwesomePage”和“ MyAnotherAwesomePage”，然后在.ts文件中需要执行以下操作

{
  name: 'Chemical Management',
  icon: 'nuclear',
  goTo: 'MyAwesomePage'
},

{
  name: 'PPE Management',
  icon: 'man',
  goTo: 'MyAnotherAwesomePage'
}


public furtherModules(sContent:any): void{
 // Validate here if sContent.goTo is a valid page
 this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}

之后，在.html文件中需要执行以下操作

<ion-list style="margin: 0" inset>
    <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
       <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
    </button>
</ion-list>

Answer 2

好吧，我只是想知道您想要实现什么目标

您必须使用以下cli来创建环境合规管理和健康与安全管理的页面

ionic g page Environment Compliace Management ionic g page Health & Safety Management

请参阅此link了解更多详细信息，最好先阅读文档。

将页面添加到您的app.module.ts中，请参考此tutorial，我不需要解释
第三次执行以下操作

在您的html文件中，将一些输入参数设置为您进一步的模块功能

(click)="furtherModules(content)

在您的ts文件中，执行以下操作

furtherModules(type:any){
       if('Environment Compliace Management'){
          this.navCtrl.push(*name of your page to environment compliace management*)
       }
       else{
          this.navCtrl.push(*name of your page to Health & Safety Management*)
       }
    }

如何在IonicFramework中选择特定的数组对象？

2 个答案: