Question

我正在构建一个移动应用程序，我希望用户能够通过设置页面设置他们的起始页面。这个想法是用户可以从选项列表中选择一个页面，该设置将存储到本地存储中，之后，当用户重新登录时，用户将首先自动进入该页面。

我有一个页面服务，其中包含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);

Answer 1

更新回答

在SettingsPage构造函数中使用forward ref ..

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

旧答案 - 不合适，因为angular应该通过注入处理服务的实例化。 “新”是一个坏主意（但确实有效）。

我更改了PagePage在SettingsPage中的加载方式，并解决了周期性依赖关系。我将PageService代码移出构造函数并将其放入 ngAfterViewInit（）函数中。现在只在加载视图时实例化PageService。

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

Ionic2 - 在不使用注入组件的情况下路由的替代方式？

1 个答案: