Question

好的，所以我在ASP.Net SPA项目的_Layout.cshtml中有一个常量变量，我想传递它们，以便Angular可以访问这些变量。

我该怎么做？

例如，这是我想要转移的一个值。

var lenderValues = @Html.Action("GetLenderDropdownValues", "Dropdown");

以下是我的第一个app.component启动方式。

<my-rite-ui>Loading...</my-rite-ui>

我知道如何在AngularJS 1.x中使用常量并注入需要的常量，但无法在Angular中找到它。

任何帮助都将受到高度赞赏。

Answer 1

这取决于你想要做什么，但我看到两种可能性：

定义常量

导入主模块时需要传递此常量。而import本身无法做到这一点。您可以导入一个函数并使用参数调用它。

以下是引导您的应用程序的主要模块示例：

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(lenderValues) {
  bootstrap(AppComponent, [
    provide('lenderValues', { useValue: lenderValues })
  ]);
}

然后您可以从HTML主页面导入它，如下所示：

<script>
  var lenderValues = @Html.Action("GetLenderDropdownValues", "Dropdown");
  System.import('app/main').then((module) => {
    module.main(lenderValues);
  });
</script>

然后可以将lenderValues注入所有元素，例如组件：

@Component({
  (...)
})
export class SomeComponent {
  constructor(@Inject('lenderValues') lenderValues) {
  }
}

在my-rite-ui元素

您可以在此级别指定参数，但无法对其进行评估。因此，您需要将其序列化为JSON.stringify的字符串，从相应的ElementRef获取组件中的元素并使用JSON.parse对其进行反序列化，这样会更加单调乏味。

然后您可以将数据添加为提供者。

Answer 2

如果您使用JIT编译，上面的第一个答案是我最喜欢的。我们使用JIT进行开发，使用AOT进行部署。我无法找到一个好的方法让第一个答案与AOT一起工作。作为参考，我在这里遵循了AOT食谱...... Angular AOT cookbook。

下面的方法不适用于服务器端渲染，但应该足以支持JIT和AOT客户端渲染。

1）在剃刀视图中，例如_layout.cshtml，只需放置一个脚本块并在窗口界面上设置一个JSON对象。我把这个块放在＆＃34; head＆＃34;标签，但并不重要。 JSON键的值可以通过任何剃刀语法确定。

＆＃13;

<script type="text/javascript">
    window.appContext = {
        userName: '@("test".ToUpper())',
        isAdmin: @(1 == 1 ? "true" : "false")
    };
</script>

＆＃13;

2）创建应用程序上下文服务并在适当的模块中连接并注入组件以供使用，如果您需要帮助，只需提供评论，我将提供更多信息。

＆＃13;

import { Injectable } from '@angular/core';

/*
    must match definition in SCRIPT tag that is seeded from razor
*/
interface IAppContext {
    userName: string;

    isAdmin: boolean;
}

/*
    
*/
@Injectable()
export class AppContextService implements IAppContext {

    userName: string;

    isAdmin: boolean;

    constructor() {
        var appContextBootstrap: IAppContext = (<IAppContext>(<any>window).appContext);

        this.userName = appContextBootstrap.userName;
        this.isAdmin = appContextBootstrap.isAdmin;
    }

}

＆＃13;

3）在整个应用程序中引用并使用应用程序上下文服务。

＆＃13;

import { Component } from '@angular/core';

import { AppContextService } from './appContext.service'

@Component({
    moduleId: module.id,
    selector: 'story-app',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    AppConfig: any;
    constructor(private appContext: AppContextService) { }

    ngOnInit() {

        alert('hi - ' + this.appContext.userName);
    }
}

＆＃13;

Answer 3

有什么问题？我很容易从像这样的HTML页面获得价值。

<强> HTML

<script type="text/javascript"> var getThisValue='I want this string in component'; </script>

<html>
  <head>
    <base href="/">
    <title>Angular 2 - Tour of Heroes</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>    

    <script type="text/javascript">
      var getThisValue='I want this string in component';
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

调用主要组件文件

alert(getThisValue);

    import { bootstrap } from '@angular/platform-browser-dynamic';
    import { HTTP_PROVIDERS } from '@angular/http';
    import { AppComponent } from './app.component';
    //import { enableProdMode } from '@angular/core';

    //enableProdMode();

    bootstrap(AppComponent, [HTTP_PROVIDERS]);

    alert(getThisValue);

它为我工作

我在您的代码中注意到的事情是您应该使用''标记来访问网址。

替换此

var lenderValues = @Html.Action("GetLenderDropdownValues", "Dropdown");

用这个

var lenderValues = '@Html.Action("GetLenderDropdownValues", "Dropdown")';

这是从HTML访问值的最简单选项，当然不是正确的方法。要访问此值，您需要定义上面Thierry Templier回答中定义的常量。

从_layout.cshtml将常量值传递给Angular

3 个答案: