Ionic/Angular 2將數據從父項傳輸到子項UI問題

我正在瀏覽器中啓動Ionic/Angular 2項目，出於某種原因，我需要單擊一個箭頭才能看到從父組件/頁面傳遞的數據到子組件/頁面。子組件的名稱是「Details」。我通過「詳細信息」頁面從「目錄」頁面傳遞一個對象。我打算爲模式，以反映在數據被從列表頁面傳遞到項目，詳細信息頁面愛奧尼亞2教程項目：https://ionicframework.com/docs/v2/setup/tutorial/Ionic/Angular 2將數據從父項傳輸到子項UI問題

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>

此時我想到剛看到頁面「完美服飾」上，但由於某種原因，我需要點擊箭頭旁邊的「詳細信息」中的數據。這是怎麼回事？

首先我需要點擊這個！

但我看到這個的時候我來到了詳細頁面，而無需任何點擊！

來源

2016-12-06 rashadb

選擇器不能是'細節'。我將它改爲'細節'，一切正常。不知何故，我想'細節'是一個魔法字。我不確定那裏發生了什麼或發生了什麼。

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

來源

2016-12-19 23:28:45 rashadb

與細節按鈕第一頁應該是你directory.html 在directory.ts文件，你正在推動的詳細信息頁面，您的導航控制器。

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

其中顯示詳細信息頁面（您的details.html按鈕單擊事件必須調用toDetails）。如果需要直接看到詳細信息頁，你必須設置

RootPage=Details

在app.component.ts

，並通過像提供其他方式提供的數據發送給它。

來源

2016-12-06 05:58:08

感謝您的回答，但我不明白如何根據您的建議進行修復。我爲你的視圖添加了directory.html。我不明白的是爲什麼我需要篡改根頁面。按照我的問題列出的教程示例鏈接，您將看到list.ts（父級）不需要篡改根頁面以便立即顯示item-details.html（child）的數據。正因爲如此，我不明白爲什麼我需要篡改根頁面，如果是的話，我可能會如何做到這一點。 – rashadb

細節按鈕是否顯示兩次？一次用於directory.html，另一個用於details.html？ –

詳細信息按鈕僅位於目錄頁面上。是否有更具體的你想要詳細說明。我想確保我很清楚。 – rashadb

Ionic/Angular 2將數據從父項傳輸到子項UI問題

回答

相關問題