Ionic/Angular 2 将数据从父级传输到子级 UI 问题答案

【问题标题】：Ionic/Angular 2 transferring data from parent to child UI issueIonic/Angular 2 将数据从父级传输到子级 UI 问题
【发布时间】：2016-12-06 03:24:27
【问题描述】：

我正在使用浏览器启动 Ionic/Angular 2 项目，出于某种原因，我需要单击箭头来查看从父组件/页面传递到子组件/页面的数据。子组件的名称是“详细信息”。我从“目录”页面向“详细信息”页面传递了一个对象。我打算让该模式镜像 Ionic 2 教程项目，其中数据从列表页面传递到项目详细信息页面：https://ionicframework.com/docs/v2/setup/tutorial/

directory.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Details } from '../details/details';

@Component({
  selector: 'directory',
  templateUrl: 'directory.html'
})
export class Directory {
   constructor(public navCtrl: NavController) {
      this.offer = {test: "Perfect Attire", test1: "Perfect Attire"}
}

toDetails(event, offer){
    this.navCtrl.push(Details,{
      offer: offer
    });
  }
}

directory.html

<ion-content padding>
   <button ion-button round large (click)="toDetails($event, offer)">
      toDetails
   </button>
</ion-content>

details.ts

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

import { NavController, NavParams } from 'ionic-angular';
import  Lodash from 'lodash';


@Component({
  selector: 'details',
  templateUrl: 'details.html'
})
export class Details {
  selectedItem: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get("offer")

}
}

details.html

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

<ion-content>
  <br><br><br><br>
  <div class="selection">
    {{selectedItem.test}}
  </div>
    {{selectedItem.test1}}
</ion-content>

此时，我希望只在“Perfect Attire”页面上看到数据，但出于某种原因，我需要单击“详细信息”旁边的箭头。怎么回事？

首先我需要点击这个！

但是当我无需点击任何内容即可进入详细信息页面时，我应该会看到这个！

【问题讨论】：

标签： angular ionic2

【解决方案1】：

带有详细信息按钮的第一页应该是您的 directory.html 在 directory.ts 文件中，您将详细信息页面推送到导航控制器。

    toDetails(event, offer){
    this.navCtrl.push(Details,{
      offer: offer
    });
  }

显示详细信息页面（您的 details.html 按钮单击事件必须调用 toDetails）。如果需要直接查看详情页，则需要设置

RootPage=Details

在你的 app.component.ts 并通过提供商等其他方式向其发送报价数据。

【讨论】：

感谢您的回答，但我不知道如何根据您的建议进行修复。我添加了 directory.html 供您查看。我不明白为什么我需要篡改根页面。按照我的问题中列出的教程示例链接，您将看到 list.ts（父级）不需要篡改根页面来获取数据以立即显示 item-details.html（子级）。正因为如此，我不明白为什么我需要篡改根页面，如果是的话，我怎么可能在运行中做到这一点。
详情按钮是否显示两次？一次用于directory.html，另一次用于details.html？
没有详细信息按钮仅在目录页面上。您是否有更具体的内容要详细说明。我想确保我清楚。
好的..我不确定是什么问题..您将目录作为根页面并带有 gotoDetails 按钮。在您的目录 ts 中单击它会打开包含数据的详细信息页面
是的，它会打开带有数据的页面，但它只是莫名其妙地没有显示它，但它需要您额外点击才能查看数据。

【解决方案2】：

选择器不能是“详细信息”。我将其更改为“详细信息”，一切正常。我想“细节”在某种程度上是一个神奇的词。我不确定那里发生了什么或发生了什么。

@Component({
  selector: 'detail',//'detail' not 'details' makes everything work normal!
  templateUrl: 'details.html'
})

【讨论】：