将初始化数据传递给 Angular 2答案

【问题标题】：Passing Initialization Data to Angular 2将初始化数据传递给 Angular 2
【发布时间】：2017-10-03 18:35:23
【问题描述】：

有谁知道我可以将初始化数据传递到使用 Angular CLI 构建的 Angular 2 应用程序的方法吗？我需要从预认证的 .NET 后端传递我目前拥有的访问令牌，以便我可以调用 API。

我尝试通过本地 Web api 端点执行此操作，但由于 Observables 是异步的，因此模块会尝试在应用中可用之前使用该值。

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

下面建议的@Bilyachat 之类的东西会很好用！我可以简单地执行以下操作：

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

任何帮助都会很棒...谢谢。

【问题讨论】：

"但我又遇到了异步问题。"请发布代码并解释您遇到的问题。
我已经更新了问题。基本上，我需要该 API 密钥来开始执行安全应用程序中的任何页面。我已经从服务器获得了密钥，需要一种方法将其传递给应用程序。
我没有看到任何关于 OnRun 的信息。你用了什么代码，造成了什么问题？
我尝试按照 Ben Nadel 关于 [bennadel.com/blog/… 调用 OnRun 方法的类的说明通过 http api 端点初始化用户配置，但由于它们是异步的，APIKey 在我需要之后进来它在我的应用程序中。由于某种原因，我无法粘贴代码。
我明白了。如果没有看到您使用的确切代码，我无法判断代码有什么问题。另见stackoverflow.com/questions/37611549/…

标签： angular

【解决方案1】：

如果您使用{}，则在返回config.load() 时需要显式return；

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

Plunker example

【讨论】：

嗨，Gunter，是否可以有两个应用程序初始化程序，而第二个初始化程序等待第一个初始化程序完成？我有一个配置服务，它返回运行 APP_INITIALIZER 的应用程序的所有 url。我还有一个本地化模块和提供程序，直到第一个本地化配置运行后才能加载，其中包含从配置服务返回的 api 端点。
我不这么认为，但是您可以将它们组合成一个并将它们连接起来，以便第二个等待第一个
这就是我最终所做的。感谢您强大的角度支持。我知道社区对此表示赞赏！

【解决方案2】：

如果您在 MVC 页面上有 Angular 应用程序，那么我会看到两个选项

第一在角度根组件属性中（在第一个建议中，我告诉您使用输入参数，但问题是根组件“超出角度”，它将无法读取参数，唯一的方法是手动读取属性）

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

}

那么当你打印时你可以这样做

<app-root data-config="valueGoeshere"></app-root>

更新plnkr

第二

在 mvc 页面上打印

var yourAppMvcConfig= {
    configValue: 'DO_PRINT_HERE'
};

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

declare var yourAppMvcConfig: {
    configValue: string;
}

在 Angular 中使用

yourAppMvcConfig.configValue

【讨论】：

感谢 Volodymyr，我尝试执行您的第一个建议，但未能成功。我做了一个Plunkr for it Here 给你看。
并且 Typings.d.ts 不存在于新的 CLI 项目中。有人说他们在谷歌搜索时被弃用了。
爱它...我现在可以双向使用...与引导时使用 APP_INITIALIZER 相比，IMO 的第一种方式非常干净。特别是因为我已经有了可以投入其中的价值观。谢谢大家。
@MikeKushner 知道两种方法总是好的 :) 因为有时您可以使用一种或另一种 :) 或同时使用两种方法
@VovaBilyachat：你能看看stackoverflow.com/questions/66785098/…。非常感谢您的指导

【解决方案3】：

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

与其将页面的加载延迟到使用您的令牌的调用返回之前，您为什么不编写在令牌返回之前不进行任何调用的代码？

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 方法的组件上重复这个逻辑。如果可能的话，仍在寻找一种方法来立即获取该密钥并在服务级别而不是容器级别使用它。
你能看看stackoverflow.com/questions/66785098/…。非常感谢您的指导

【解决方案4】：

这是我找到的解决方案。您的 index.html 文件就在 angular 开始加载脚本文件的位置。您可以添加以下行：

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

这会将数据放在客户端的本地存储中，您可以在应用程序中检索。我正在使用 php 尝试初始化 opencart 商店中的一些内容。这是传递数据的好方法。如果您要传递 JSON，则需要在传递之前 json.stringfy。当您从应用程序中检索它时，您需要执行 json.parse

【讨论】：