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

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

目录.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
    });
  }
}

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")

}
}

directory.html

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

<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>

details.html

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

<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>

现金回家





{{selectedItem.test}
{{selectedItem.test1}

此时，我希望只看到页面“完美着装”上的数据，但出于某种原因，我需要单击“详细信息”旁边的箭头。发生什么事了

首先我需要点击这个

但是当我进入详细信息页面时，我应该会看到这一点，而没有任何东西可以点击

---

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

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

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

RootPage=Details

在你的app.component.ts中

---

并通过提供商等其他方式向其发送报价数据。

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

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

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

RootPage=Details

在你的app.component.ts中

---

并通过提供商等其他方式向其发送报价数据。

选择器不能为“详细信息”。我把它改为“细节”，一切正常。我想“细节”是个神奇的词。我不知道为什么或者那里发生了什么

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

---

选择器不能为“详细信息”。我把它改为“细节”，一切正常。我想“细节”是个神奇的词。我不知道为什么或者那里发生了什么

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

---

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