2017-03-19 37 views
1

離子是否有能力使用一個組件來顯示每個級別的列表中的分層數據並通過navController.push(theComponent)導航到它?Ionic/Angular 2:在NavController中多次使用一個組件

我有具有以下結構的JSON數據:

list 
    field1 
    sublist 
     field1 
     subsublist 
     ... 
    field1 
    sublist 
     field1 
     subsublist 
     ... 

我在離子顯示的列表中寫了一個組件。通過單擊一個列表條目,我想用相同的組件顯示這個條目的子列表。我嘗試這樣做:

@Component({ 
    templateUrl: 'template.html' 
}) 

export class MyComponent { 
    items = []; // Items of a level to be displayed 
    constructor (public nav: NavController) 
    { 
    } 
openItemClick(sublist) { 
    this.items = sublist; 
    this.nav.push(this); // This will be crash!! 
} 
} 

我成爲Runtime error: Uncaught (in promise): false. 這是不可能使用組件的同一個實例。是否有能力在此時實例化新實例並在this.nav.push(newInstance)中使用它?

+0

,這意味着你的'items'對象是空的,它可以解決他們進入孩子組件 – Aravind

+0

項目將被設置在別處(通過參數或服務)。我現在還沒有完整的解決方案。我有層次數據,看起來在每個級別完全相同,並希望導航扔它。必須使用相同的組件,因爲數據層次結構的深度是可變的。 –

回答

0

this是一個實例,而您預計需要push一個類。我假設您最初瀏覽到您的列表如下:

this.nav.push(MyComponent, list); 

所以,你應該改變你的方法了一下:

openItemClick(sublist) { 
    this.nav.push(MyComponent, sublist); 
} 
相關問題