如何从mvc传递到angular 2并输入脚本？

I need some help.I am new to angular. What i want is to pass some data (string variable 'element') to my UI and then I want to use it. I do not know how to pass it inside main.js and further. How can I pass variable to typescript file from my mvc server? Index.cshtml:

我需要一些帮助。我是棱角分明的新手。我想要的是将一些数据(字符串变量'element')传递给我的UI,然后我想使用它。我不知道如何在main.js中传递它。如何从我的mvc服务器将变量传递给typescript文件? Index.cshtml:

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<app-root>Loading...</app-root>

My layout file:

我的布局文件:

 @{
var elementServer = CamComponentGenerator.Api.App.elementID;
}

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Cam Component Generator for Onshape</title>
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/systemjs.config.js"></script>
<script>
    System.import('../ngapp/.compiled/main.js').catch(function (err)
    {
        console.error(err);
    });
</script>
<script>
    var element = "@elementServer";
</script>
  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/ccg-script.js")
@RenderSection("scripts", required: false)
</body>
</html>

My main.ts file:

我的main.ts文件:

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app.module';
 const platform = platformBrowserDynamic();
 platform.bootstrapModule(AppModule);

and my app.ts file:

和我的app.ts文件:

 import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParamsComponent } from './app/ccg-disk-cam-params/disk-cam-
 params.component';
import { CenterComponent } from './app/ccg-center/ccg-center.component';
import { ResultsComponent } from './app/ccg-results/ccg-results.component';
import { OutputComponent } from './app/ccg-output/ccg-output.component';
import { CylinderTranslatingComponent } from './app/ccg-disk-cam-follower-
params/cylinder-translating.component';
import { CylinderSwingingArmComponent } from './app/ccg-disk-cam-follower-
params/cylinder-swinging-arm.component';
import { SphereTranslatingComponent } from './app/ccg-disk-cam-follower-
params/sphere-translating.component';
import { SphereSwingingArmComponent } from './app/ccg-disk-cam-follower-
params/sphere-swinging-arm.component';
import { ModalComponent } from './app/ccg-modal/ccg-modal.component';
import { HttpModule } from '@angular/http';


@NgModule({
 imports: [BrowserModule, HttpModule, FormsModule ],
 declarations:
 [
    AppComponent,
    ParamsComponent,
    CenterComponent,
    ResultsComponent,
    OutputComponent,
    CylinderTranslatingComponent,
    CylinderSwingingArmComponent,
    SphereSwingingArmComponent,
    SphereTranslatingComponent,
    ModalComponent
],
 bootstrap: [AppComponent]
})
export class AppModule { }

1 个解决方案

#1

You can create a global javascript variable, or you can use local storage.

您可以创建全局javascript变量,也可以使用本地存储。

GlobalVariable:

Before boostrapping angular:

在增强角度之前:

<script>
        var element = "@elementServer";    
        var globalVariable = element;            
</script>

When you need to use the variable in your component declare is as any:

当您需要在组件中使用变量时,声明与以下任意一样:

declare var globalVariable: any;

声明var globalVariable:any;

And you can then use it:

然后你可以使用它:

var myGlobal = globalVariable;

Using LocalStorage:

This is more of a workaround that I've used before. You can pass the razor variable to javascript as you are doing, then save it in localStorage. Then you angular components can retrieve the value from localStorage.

这是我之前使用的更多解决方法。您可以将razor变量传递给javascript,然后将其保存在localStorage中。然后,角度组件可以从localStorage中检索值。

Both these approaches are not recommended for sensitive data.

这些方法都不建议用于敏感数据。

So before you bootstrap angular2:

所以在你引导angular2之前:

<script>
    var element = "@elementServer";    
    localStorage.setItem('elementServer',element);
</script>

then you can retrieve the item in your angular component:

然后你可以检索角度组件中的项目:

var lstorage = localStorage.getItem("elementServer");

Plunker example

#1