Question

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

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

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

我的布局文件：

 @{
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>

我的main.ts文件：

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

和我的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 { }

Answer 1

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

<强>全局变量：

在增强角度之前：

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

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

声明var globalVariable：any;

然后你可以使用它：

var myGlobal = globalVariable;

使用LocalStorage：

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

对于敏感数据，这两种方法都

。

所以在你引导angular2之前：

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

然后您可以检索角度分量中的项目：

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

Plunker example

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

1 个答案: