将 Razor 模型传递给 Angular 5 组件 [英] Pass Razor model to Angular 5 component

问题描述

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

I have this in my asp.net razor view:

@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，我试图用 [] 代替 [()]，但没有成功.

Output in console says "udefined"... I have tried to name 'myModel' as ngModel, i have tried to bind with [] instead [()], but no luck.

如何将 Razor 模型传递给 Angular 5 组件?

How can i pass Razor model to Angular 5 component?

推荐答案

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

I faced the same issue as you, undefined, finally this worked for me. If you have found a better way please share.

cshtml:
<input type='hidden' id="radhe" value="@ViewBag.ClubID"/>
<book-slot></book-slot>

cshtml:
<input type='hidden' id="radhe" value="@ViewBag.ClubID"/>
<book-slot></book-slot>

组件:

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

这篇关于将 Razor 模型传递给 Angular 5 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！