Ionic2：不能在服務中使用NavController。

我還是個學習者。不僅在Ionic中，也在Angular中。Ionic2：不能在服務中使用NavController。

我已經寫了一些頁面，並希望爲每個頁面添加頁腳，用戶可以通過所有主頁進行切換。在寫完第二頁之後，我發現爲此提供服務會很好，因爲我再次使用了相同的方法。

這裏是我的服務看起來像現在：

export class Navigation { 
    public navCtrl: NavController; 

    onLoadHome(){ 
    this.navCtrl.push(HomePage); 
    } 
}

當我現在請Navigator.onLoadHome（）在一個HTML模板，我得到了以下錯誤：無法讀取屬性的「推動」未定義。

所以我知道我的應用程序找到服務，並找到方法。但我的navCtrl是未定義的。我嘗試了另外一種方法：

export class Navigation { 
    constructor(private navCtrl: NavController){} 

    onLoadHome(){ 
    this.navCtrl.push(HomePage); 
    } 
}

現在我又收到一條錯誤消息：無法解析導航的所有參數。

我真的不知道該怎麼做才能完成這項工作。我希望你能幫助我。

（順便說一句，我已經縮短該類一點。但是其他的方法，像onLoadHome一樣，只爲其他頁面。）

來源

2017-10-04 Christian Gehn

發佈'NavController' –

['NavController']（https://ionicframework.com/docs/api/navigation/ NavController /）只能在頁面/組件中注入。在服務中操作導航堆棧通常不是一個好主意 –

您可以像這樣的'onLoadHome（navCtrl：NavController）''將'NavController'對象傳遞給'onLoadHome（）'函數。 – hrdkisback

這不是頁面之間進行導航的好辦法，但我希望這威力幫助你

在要使用本服務的頁面，你得導入服務，然後將其設置這樣

public mNavigation: Navigation; 

constructor(public navCtrl: NavController, public navParams: NavParams) { 
    this.mNavigation = new Navigation(navCtrl) 
}

當你要瀏覽，只需調用this.mNavigation.onLoadHome();

更好的方法是，您應該在您的服務中使用App的Nav而不是NavCtrl。它看起來像這樣

import { App } from 'ionic-angular'; 

@Injectable() 
export class NavigationProvider { 

    constructor(public app: App) { 
    } 

    onLoadHome(){ 
    this.app.getActiveNav().push(HomePage); 
    } 
}

那麼你的頁面會是這樣

constructor(public navCtrl: NavController, 
    public mNavigationProvider: NavigationProvider, 
    public navParams: NavParams) { 
    } 

    onNavigate() {  
    this.mNavigationProvider.onLoadHome(); 
    }

來源

2017-10-04 10:21:04

我試過這一個，但我仍然得到一個運行時錯誤：'無法解析導航的所有參數'。順便說一句，爲什麼它不是一個很好的方式來瀏覽頁面？ –

「從服務中改變視圖是不好的做法（中斷的MVC），但是，您可以將事件從服務發送到主控制器，並且控制器可以使用NavController（最佳方式），或者可以將NavController發送到您的服務一個屬性（不壞的方式......），或者你可能需要創建一個組件，而不是使用該服務。「我剛剛添加另一種方式，你應該嘗試 –

首先你的第二個例子完美地工作！謝謝你。 :) 給你的建議。這意味着我應該編寫一個導航組件。在這一個，我應該寫下所有的方法，然後我可以使用這個組件作爲每個頁面的新頁腳。我對你有正確的理解嗎？ –

Ionic2：不能在服務中使用NavController。

回答

相關問題