asp.net mvc - asp.net 서버 매개 변수를 각도 2 앱으로 전달



asp.net-mvc asp.net-web-api (2)

.NET Core 서버에서는 IOptions<>IOptions<> 를 사용하는 것이 좋습니다.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    // ...

    services.AddOptions();
    services.Configure<Models.EnvironmentSettings>(Configuration.GetSection("client"));
    services.Configure<Models.EnvironmentSettings>(options =>
    {
        options.OtherSetting = "Other";
    });

    services.AddMvc();
}

모델 / 환경 설정 .cs

public class EnvironmentSettings
{
    public string OtherSetting { get; set; }
    public string LoginUrl { get; set; }
}

appsettings.json

{
    "client": {
        "LoginUrl": "http://localhost:45290/Token"
    }
}

컨트롤러 / 컴포넌트 /BootstrapViewComponent.cs

public class BootstrapViewComponent : ViewComponent
{
    private IOptions<EnvironmentSettings> environmentSettings;

    public BootstrapViewComponent(
        IOptions<EnvironmentSettings> environmentSettings
    )
    {
        this.environmentSettings = environmentSettings;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View(environmentSettings.Value);
    }
}

보기 / 공유 / 구성 요소 / 부트 스트랩 /Default.cshtml

@model YourApp.Models.EnvironmentSettings
<script>
    System.import('app')
        .then(function (module) {
            module.main({
                other: "@Model.OtherSetting",
                loginUrl: "@Model.LoginUrl"
            })
        })
        .catch(function (err) {
            console.error(err);
        });
</script>

조회수 / 공유 /_Layout.cshtml

<head>
...
@await Component.InvokeAsync("Bootstrap")
</head>

main.ts

export function main(settings: any) {
    platformBrowserDynamic([{ provide: 'EnvironmentSettings', useValue: settings }]).bootstrapModule(AppModule);
}

===================================================== ==============

편집 : 솔루션 2.0 최종 업그레이드 후-RC5 업그레이드 후 ngModule에 서버 매개 변수 전달

===================================================== ================

서버 매개 변수를 Angular 2 응용 프로그램으로 전달하는 방법

즉, MVC 객체 "HttpContext.User.Identity.Name"을 사용하고 angular 2 앱의 어느 곳에 나 주입 할 수있게하고 싶습니다.

각도 1에서는 ng ".constant"를 사용하여 index.cshtml의 .Net 객체를 JSON으로 직렬화 할 수있었습니다.

params를 전달하는 방법이 있지만 .Net 코드에서는 작동하지 않습니다. Angular 2에서 전역 상수 정의

        //HTML - Bootstrapping
        <script>

            System.import('app/main').then(null, console.error.bind(console));
            //I WOULD LIKE TO PASS SOME PARAMS TO APP/MAIN HERE
        </script>

최종 솔루션 : (티에리에게 큰 감사)

index.cshtml :

<script>
    System.import('app/main').then(
        module => 
            module.main(
                {
                    name: '@User.Identity.Name',
                    isAuthenticated: User.Identity.IsAuthenticated.ToString().ToLowerInvariant(),
                }
            ),
        console.error.bind(console)
    );
</script>

main.ts :

...
    import {provide} from '@angular/core';
...

    export function main(params) {
        bootstrap(AppComponent,
            [
                provide('Name', { useValue: params.name }),
                provide('IsAuthenticated', { useValue: params.isAuthenticated }),
                ROUTER_PROVIDERS,
                HTTP_PROVIDERS,
                LoggerService,
                AuthenticationService
            ]);
    }

용법:

import {Component, Injectable, Inject} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
    selector: 'navbar',
    templateUrl: 'app/components/header/navbar.html',
    directives: [ROUTER_DIRECTIVES]
})
export class SomeComponent {

    constructor(@Inject('Name') public username: string) {

    }

}


Answer #1

부팅하기 위해 platformBrowserDynamic을 사용하는 사람들에게 정보 주셔서 감사합니다.

main.ts :

//platformBrowserDynamic().bootstrapModule(asstModule);

export function main(appSettings: any) {   
    platformBrowserDynamic([{ provide: 'AppSettings', useValue: appSettings }]).bootstrapModule(asstModule);
}





angular