将初始化数据传递给Angular 2

问题描述：

有谁知道一种方法，我可以将初始化数据传递到Angular CLI构建的Angular 2应用程序中吗？我需要从预先认证的.NET后端传递Access令牌，以便我可以调用API。将初始化数据传递给Angular 2

我试图通过本地web api端点来做到这一点，但由于Observables是异步的，模块会尝试在应用程序中可用之前使用该值。

我已经尝试了@Ben Nadel的OnRun建议Here。我的http调用的结果仍然发生在应用程序加载后，导致我的访问标记在第一次加载时为空。

像@Bilyachat建议在下面会很好！在那里我可以简单地做下面的事情：

<app-root [apiKey]="1234567890xxxxx"></app-root>

任何帮助将是可怕的...谢谢。

“但我跑再次进入异步问题。“请发布代码并解释遇到的问题。 –

我已经更新了这个问题。基本上，我需要该API密钥才能开始执行安全应用程序中的任何页面。我已经从服务器获得密钥，并需要将其传递给应用的方法。 –

我没有看到任何关于'OnRun'的信息。你使用了什么代码，它造成了什么问题？ –

答

如果你有角应用MVC页面上，然后我看到两个选项

首先在角根组件的属性（在第一个建议，我告诉你使用的输入参数，但问题是，根组件“出角”，它会无法读取参数的唯一方法是，当你打印，你可以做这样的

阅读手动属性）

import {Component, NgModule, Input, ElementRef} from '@angular/core' 
export class App { 
    myConfig: any; 
    constructor(element: ElementRef) { 
    this.myConfig = element.nativeElement.getAttribute('data-config'); 
    } 

}

然后

更新plnkr

二MVC页面上

打印

var yourAppMvcConfig= { 
    configValue: 'DO_PRINT_HERE' 
};

添加到SRC/typings.d.ts（如果它缺少它添加）

declare var yourAppMvcConfig: { 
    configValue: string; 
}

用于Angular

yourAppMvcConfig.configValue

谢谢Volodymyr，我试着做你的第一个建议，但无法让它工作。我在这里做了一个[Plunkr]（https://plnkr.co/edit/46rXGzmtd5JRf8GQFxNg?p=preview）给你看。 –

而新的CLI项目中不存在Typings.d.ts。有人说，他们在谷歌搜索时被弃用。 –

@MikeKushner检查更新 –

答

“模块尝试在应用程序可用之前使用该值” - 我认为这是您的问题。

相反，延迟加载页面直到您的令牌调用返回，为什么您不写代码，直到令牌返回时才进行任何调用？

ngOnInit() { 
    this.tokenService.getToken().subscribe((token) => { 
     console.log('now I have a token, and am ready to make my calls', token); 

     this.secureService.getSecureDataUsingToken(token).subscribe((result) => { 
      console.log('here is the result of the authenticated call', result); 
     } 
    }); 
}

你是绝对正确的@paul，这将起作用，除非我必须重复使用secureService.xxxMethod方法的每个组件上的逻辑。仍然在寻找一种方法，将密钥直接从服务级别使用，而不是在容器级别上使用，如果可能的话。 –

答

如果使用{}，明确return在返回config.load需要（）;

useFactory: (config: AppConfig) =>() => { 
    return config.load(); 
    },

Plunker example

嗨Gunter，是否有可能有两个应用程序初始化器，第二个初始化器等待直到第一个完成？我有一个配置服务，返回运行APP_INITIALIZER的应用程序的所有url。我还有一个本地化模块和提供程序，只有在本地化的第一个配置已经运行时才能加载，其中包含从配置服务返回的api端点。 – crh225

我不这么认为，但你可以将它们合并成一个单独的单元并将它们连接起来，以便第二个单元等待第一个单元 –

这就是我最终做的。感谢您提供强有力的角度支持。我知道社区对此表示赞赏！ – crh225

答

这里是一个解决方案，我发现。您的index.html文件正好从角度开始加载您的脚本文件。您可以添加以下行：

<script type="text/javascript">localStorage.setItem("title", "<?php echo $title; ?>")</script>

这将将数据放在localStorage的客户端上的，你可以检索你的应用程序中。我正在使用PHP试图在opencart商店中初始化一些内容。这是一个很好的方式来传递数据。如果你传递一个JSON，你需要通过json.stringfy。当你通过应用程序检索它时，你需要做json.parse

将初始化数据传递给Angular 2

相关推荐