Ionic2 - 不使用注入組件進行路由的替代方法？

我建立一個移動應用程序，我想用戶必須通過設置頁面設置其起始頁面的能力。這個想法是，用戶可以從一個選項列表中選擇一個頁面，該設置被存儲到本地存儲，然後，當用戶重新登錄時，用戶會首先被自動帶到該頁面。Ionic2 - 不使用注入組件進行路由的替代方法？

我有一個網頁服務包含的Id的頁面組件的映射。這是我用來查找我想要使用的頁面，當我讀取用戶保存的起始頁數據時。

我的問題是，我已經開發出一種循環依賴，我不認爲沒有找到一種方法來Ionic2路線不利用噴射的組件包括我可以打破。據我所知，路由只有方式Ionic2實現與NavController.push（組件）或Nav.setRoot（組件）。

PageService.ts

import {Injectable} from "@angular/core"; 
import {HomePage} from "../pages/home/home"; 
import {SettingsPage} from "../pages/settings/settings"; 
import {CartPage} from "../pages/cart/cart"; 

@Injectable() 
export class PageService { 
    public pages = [ 
     { 
      id: "HOME", 
      component: HomePage 
     }, { 
      id: "SETTINGS", 
      component: SettingsPage 
     }, { 
      id: "CART", 
      component: CartPage 
     } 
    ]; 

    constructor() { 
    } 

    getPageById(id: string) { 
     return this.pages.find(page => (page.id === id)); 
    } 
}

settings.ts：

我SettingsPage成分注入，以便它可以訪問得到的網頁列表中選擇PageService。 這是我的週期性依賴發生的地方。 SettingsPage注入了PageService，它對SettingsPage有一個引用。

import {Component} from "@angular/core"; 
import {PageService} from "../../providers/page-service"; 
import {UserService} from "../../providers/user-service"; 

@Component({ 
    selector: "page-settings", 
    templateUrl: "settings.html", 
}) 
export class SettingsPage { 
    startPages = []; 

    constructor(private pageService: PageService, private userService: UserService) { 
     this.startPages = this.pageService.getStartPages(); 
    } 
}

settings.html：

只是一個簡單的列表與卡輸出的選擇。

<ion-content padding> 
    <ion-list> 
     <ion-card padding> 
      <ion-card-title>Starting Page</ion-card-title> 
      <ion-item> 
       <ion-select [(ngModel)]="userService.activeUser.startPage"> 
        <ion-option *ngFor="let page of startPages" value="{{page.id}}"> 
         {{page.id}} 
        </ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-card> 
    </ion-list> 
</ion-content>

......最後，當應用程序啓動時，我想自動轉到我的起始頁我執行以下命令：

const startPage = this.pageService.getPageById(this.userService.activeUser.startPage); 
this.nav.setRoot(startPage.component);

來源

2017-07-25 captain_jim1

更新答案

使用前ref在SettingsPage的構造函數中。

constructor(@Inject(forwardRef(() => PageService)) private pageService: PageService) { 
    this.startPages = this.pageService.getStartPages(); 
}

Old Answer - 不合適，因爲角度應該通過注入來處理服務的實例化。「新」是一個壞主意（但它確實有效）。

我改變了PageService是如何在SettingsPage加載和循環依賴得到解決。我將PageService代碼從構造函數中移出，並將其放入函數ngAfterViewInit（）函數中。現在，PageService僅在視圖加載時才實例化。

ngAfterViewInit(){ 
    this.pageService = new PageService(); 
    this.startPages = this.pageService.getStartPages(); 
}

來源

2017-07-25 00:49:28

Ionic2 - 不使用注入組件進行路由的替代方法？

回答

相關問題