Übergeben Sie konstante Werte an Angular aus _layout.cshtml

Okay, also habe ich eine konstante Variablen in der _Layout.cshtml ASP.Net SPA-Projekt, und ich würde sie übergeben, damit Angular Zugriff auf diese haben.Übergeben Sie konstante Werte an Angular aus _layout.cshtml

Wie kann ich das tun?

Zum Beispiel, hier ist ein Wert, den ich versuche zu übertragen.

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

und hier ist, wie meine erste app.component bootet.

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

Ich weiß, wie es mit nur konstant in AngularJS 1.x zu tun und Injizieren, dass ständige wo auch immer benötigt wird, kann es aber nicht in Angular herauszufinden.

Jede Hilfe wird sehr geschätzt.

Quelle

2016-05-19 premsh

Es hängt davon ab, was Sie genau tun wollen, aber ich sehe zwei Möglichkeiten:

definieren eine Konstante

Diese Konstante Bedarf bestanden, wenn Ihr Hauptmodul zu importieren. Während dies auf der import selbst nicht möglich ist. Sie können eine Funktion importieren und mit Parametern aufrufen. Hier

ist eine Probe des Hauptmoduls, die Ihre Anwendung Schopf aus dem Sumpf:

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

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

Dann können Sie es von Ihrem HTML-Haupt-Seite wie folgt importieren:

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

Ihre lenderValues kann dann injiziert werden in allen Elementen wie eine Komponente:

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

definieren einen Parameter auf my-rite-ui Element

Sie einen Parameter auf dieser Ebene festlegen können, aber es kann nicht ausgewertet werden. Es ist also etwas mühsamer, da Sie es als Zeichenfolge mit JSON.stringify serialisieren müssen, das Element in Ihrer Komponente von der entsprechenden ElementRef abrufen und es mit JSON.parse deserialisieren.

Dann können Sie die Daten als Anbieter hinzufügen.

Quelle

2016-05-23 07:05:09

Was ist das Problem? Ich habe leicht Wert von einer HTML-Seite wie dieser erhalten.

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>

Anruf Hauptkomponentendatei

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

für mich die Arbeit

auf, was ich merke in Ihrem Code haben, ist Ihnen '' Zeichen für den Zugriff auf URL verwenden soll.

Ersetzen Sie diese

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

mit diesem

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

Dies ist die einfachste Möglichkeit ist eine richtige Art und Weise zuzugreifen Wert von HTML natürlich nicht. Um auf diesen Wert zuzugreifen, müssen Sie eine Konstante definieren, wie in Thierry Templier Antwort oben definiert.

Quelle

2016-05-23 07:19:35

Diese importieren nicht der richtige Weg ist. Du benutzt hier nur ein globales. Keine Verschlüsse. –

Die erste Antwort oben war mein Favorit, wenn Sie JIT Compilation verwenden. Wir verwenden JIT für die Entwicklung und AOT für die Bereitstellung. Ich konnte keinen guten Weg finden, die erste Antwort mit AOT zu arbeiten. Als Referenz folgte ich dem AOT Kochbuch hier ... Angular AOT cookbook.

Der folgende Ansatz funktioniert nicht für serverseitiges Rendering, sollte aber für JIT- und AOT-Client-Side-Rendering ausreichen.

1) In der Rasiereransicht, _layout.cshtml zum Beispiel, legen Sie einfach einen Skriptblock und setzen ein JSON-Objekt auf der Fensteroberfläche. Ich habe diesen Block innerhalb des "Kopf" -Tags platziert, ist aber nicht wirklich wichtig. Die Werte für die JSON-Schlüssel können mit jeder Rasierersyntax festgelegt werden.

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

2) Erstellen Sie einen App Kontextdienst und Draht in entsprechenden Modul und injiziert in Komponenten für die Verwendung, wenn Sie mit diesem Kommentar nur die Hilfe benötigen, und ich werde weitere Informationen liefern.

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) verwenden, um die Referenz und app Kontextdienst in der gesamten Anwendung.

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

Quelle

2017-05-09 13:26:30

Übergeben Sie konstante Werte an Angular aus _layout.cshtml

Antwort

Verwandte Themen