将 Razor 模型传递给 Angular 5 组件

Posted 2023-03-13

【中文标题】将 Razor 模型传递给 Angular 5 组件

【英文标题】：Pass Razor model to Angular 5 component

【发布时间】：2018-08-30 23:45:38

【问题描述】：

我在我的 asp.net razor 视图中有这个：

@model IEnumerable<MyClass>

<app-root [(myModel)]="'@Model'"></app-root>

还有这个

import  Component  from '@angular/core';
import  Input  from '@angular/core';

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',

  styles: []
)


export class AppComponent 
    title = 'app';

    @Input()
    public myModel: any;

    ngOnInit() 
        console.log(this.myModel);
    

控制台中的输出显示“udefined”... 我尝试将“myModel”命名为 ngModel，我尝试使用 [] 而不是 [()] 进行绑定，但没有成功。

如何？

【问题讨论】：

尝试在视图模板上打印以显示<div>@Model</div> -- 你看到了什么？您需要将模型序列化为 JSON，以便应用可以使用它。

我用 var jsonModel = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));在 app-root 标记内我可以看到 json 字符串，但控制台中仍然打印了未定义的值...

【参考方案1】：

我遇到了和你一样的问题，未定义，最后这对我有用。如果您找到了更好的方法，请分享。

cshtml: 书槽>

组件：

import  Component, OnInit, Inject, Injectable from '@angular/core';
import  DataService  from '../Shared/DataService';
import  DOCUMENT  from '@angular/common';

@Component(
  selector: 'book-slot',
  templateUrl: './book-slot.component.html',
  styleUrls: ['./book-slot.component.css']
)

@Injectable()
export class BookSlotComponent implements OnInit 
    clubId: number;

    constructor(private data: DataService, @Inject(DOCUMENT) private document: any) 
        this.clubId = this.document.getElementById("radhe").value;