Question

和很多人一样，我参与了很多Angular项目，包括旧的1.x和新的2+（目前是版本4）。我经常在这些项目中处理的问题之一是在不同页面之间共享应用程序级数据。

有几种方法可以做到这一点，例如使用服务并将其注入使用相同数据的不同页面中。此外，我看到一些项目使用本地存储来保存公共数据，以便其他页面可以随时访问并在需要时检索它。

最近，我想提出一个更好的解决方案：我简单地介绍了一个带有注入数据服务的基页，以便我可以在子类中相应地共享数据。换句话说，注入仅在基类处完成（即，不需要为每个页面注入服务）。但是，为了做到这一点，我必须在基类中的静态数据成员中保存引用。在这种情况下，如果我在构造函数中获得注入数据服务，我将其保存到静态成员，如果没有，我尝试使用静态数据成员的值初始化类实例。现在，我在基类中注入了数据，并且我能够从子类中访问它。这非常有效，我很满意。

以下是示例代码段：

// Shortened for the sake of simplicity
@Component({
    selector: 'base-page',
    templateUrl: "./index.html",
    styleUrls: [ "./index.scss" ],    
})
export class BasePage implements OnInit {
    static dataService: DataService;

    constructor(public dataService?: DataService) {
        console.log("dataService", dataService);

        if (dataService) {
            // Just make sure to include the base-page in the 
            // main html page of your app (i.e. <base-page></base-page>) 
            // Now the service will be injected and we have a 
            // chance to get the reference to it.
            console.log("Data service is set in the BasePage");
            BasePage.dataService = dataService;
        }
        else {
            // This sets the class instance with the value from the 
            // static data member of this class.
            // Now, the dataService is accessible from the 
            // subclasses...
            this.dataService = BasePage.dataService;
        }        
    }   

    ngOnInit() {
        console.log("Hello BasePage");
    }
}

// ...
// Shortened for the sake of simplicity
@Component({
    selector: 'home-page',
    templateUrl: "./index.html",
    styleUrls: [ "./index.scss" ],    
})
export class HomePage extends BasePage implements OnInit {

    constructor() {
        super();

    }

    ngOnInit() {
        console.log("Hello HomePage");
        console.log("Data", this.dataService.appLevelData);
    }
}

我想知道是否有其他人尝试过类似的做法？您最喜欢在应用程序中的不同页面之间共享公共数据的方式是什么？

我很想看到你的反应，我相信来自不同开发者的这个问题的答案也可能对其他开发者有很大的帮助。

提前致谢。

Answer 1

我总是在构造函数中注入服务，但我明白你的观点。我试试看。

如何在Angular 2 +

1 个答案: