親から子までのデータを転送するIonic/Angular 2 UIの問題

Question

私はブラウザでIonic/Angular 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

：私は、データがアイテム詳細ページにリストページから渡されたイオン2チュートリアルプロジェクトをミラーリングするためのパターンを意図します

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

「パーフェクト服装」が、私は、「詳細」の隣にある矢印をクリックする必要があるいくつかの理由があります。どうしたの？

まずはこれをクリックしてください！

しかし、私はクリックする何もなくても、詳細ページに来るとき、私はこれを見るべきです！ directory.tsはあなたのナビゲーションコントローラに詳細ページを推進しているファイル内の詳細ボタンと

Answer 1

セレクタを「詳細」にすることはできません。私はそれを「ディテール」に変更し、すべて正常に機能しました。私は、「詳細」は何とか魔法の言葉だと思う。なぜ、何が起こったのか分かりません。

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

Answer 2

最初のページには、あなたのdirectory.html でなければなりません。

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

詳細ページ（details.htmlボタンのクリックイベントは詳細を呼び出す必要があります）が表示されます。あなたが直接詳細ページを参照する必要がある場合 、あなたのapp.component.ts で

RootPage=Details 

を設定し、プロバイダなどの他の手段を介して提供するデータを送信する必要があります。