【问题标题】:App wide variables in Angular2 (RC5)Angular2 (RC5) 中的应用范围变量
【发布时间】:2016-08-17 15:53:15
【问题描述】:

我想创建一个可在各种 angular2 组件和导入模块之间访问的应用程序范围的变量。

我在app.module 中查看了依赖注入,并认为也许我可以在其中设置一个具有属性的类。然而,随着新的 angular-RC5 版本,这看起来对我想做的事情来说过于复杂了。

另外,我想过使用@Inputs 和@Outputs 来级联数据并订阅更改,但是,这在模块之间似乎是不可能的。

如果能提供最简单的方法,我将不胜感激。

就我的特定应用而言,我有一个导航栏组件,我想在除一条之外的所有路线上显示它。所以我在我的app.component 模板上有它,带有 *NgIf 条件,然后我希望能够从各种子组件更改以显示导航栏,而不必将导航栏组件嵌入到我的所有子模块和组件中(在模块之间共享组件时会变得很棘手。我的一些路由是在模块中导入的。

【问题讨论】:

    标签: javascript angular typescript


    【解决方案1】:

    您可以创建共享服务。

    类似的东西:

    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class GenericService {
        data:any = {};
    }
    

    然后将其添加到您的 app.module。

    之后,您可以将其注入您的组件并在其上添加可从您的所有组件访问的数据。

    【讨论】:

    • 是否可以在导入的子模块中访问?进入 app.module?
    • 另外,如果我有export class AppComponent { showHeader: boolean = false; constructor(private uiService: UiService) { this.showHeader = uiService.navOn; } },那么如果我在其他地方更改值,showHeader 将不会更新?
    • 不会的。看到这个plnkr.co/edit/Ii4t7o6NEUdg3uvxvdUn?p=preview 你有 2 个解决方案:将{{name}} 更改为 {{gs.data.name}}(在 plunker 中尝试)或使用 observable 并“订阅”您的服务(您可以在网络上轻松找到示例)
    【解决方案2】:
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-03-16
    • 1970-01-01
    • 1970-01-01
    • 2018-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多