Передайте постоянные значения в Angular от layout.cshtml по

Итак, у меня есть постоянные переменные в файл _Layout.cshtml ASP.Net СПА-проект, и я бы передал их так, чтобы у Angular был доступ к ним.

Как я могу это сделать?

например, вот одно значение, которое я пытаюсь передать. 

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

а вот как мое первое приложение.компонент загружается. 

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

Я знаю, как это сделать в AngularJS 1.x только с константой и инъекцией этой константы, где это необходимо, но не может выясните это в Angular.

любая помощь будет высоко ценится.

6
angular asp.net single-page-application

3 ответов

это зависит от того, что вы хотите точно сделать, но я вижу две возможности:

  • определить константу

эта константа должна быть передана при импорте вашего основного модуля. В то время как это невозможно сделать на . Вы можете импортировать функцию и вызывать ее с параметрами.

вот пример основного модуля, который загружает ваше приложение:

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.

затем вы можете добавить данные в качестве поставщика.

8

первый ответ выше был моим любимым, если вы используете компиляцию JIT. Мы используем JIT для разработки и AOT для развертывания. Я не мог найти хороший способ заставить первый ответ работать с AOT. Для справки я следовал поваренной книге AOT здесь... угловой AOT поваренная книга.

подход ниже не будет работать для рендеринга на стороне сервера, но должен быть достаточным для рендеринга на стороне клиента JIT и AOT.

1) в виде бритвы, _layout.cshtml ПО для например, просто поместите блок скрипта и установите объект JSON в интерфейсе окна. Я поместил этот блок в тег "head", но это не имеет значения. Значения для ключей JSON можно определить с помощью любого синтаксиса razor.

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

2) Создайте службу контекста приложения и подключите соответствующий модуль и вставьте в компоненты для использования, если вам нужна помощь с этим просто комментарием, и я предоставлю больше информация.

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;
    }

}

3) ссылка и использование службы контекста приложения во всем приложении.

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);
    }
}
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);

это работа для меня

на то, что я заметил в вашем коде, вы должны использовать '' отметка для доступа к url.

заменить

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

С это

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

это самый простой вариант доступа к значению из HTML конечно не правильный способ. Чтобы получить доступ к этому значению, вам нужно определить константу, определенную в Thierry Templier ответ выше.

0