Pass Razor model to Angular 5 component

问题

I have this in my asp.net razor view:

@model IEnumerable<MyClass>

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

and this

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

}

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

How can i pass Razor model to Angular 5 component?

回答1:

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>

Component:

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

来源：https://stackoverflow.com/questions/49413398/pass-razor-model-to-angular-5-component