Question

有什么方法可以直接将json文件作为值分配给@Input吗？

说我有如下的 config.json ，

{
    "video": [
        {
            "videoSrc": "assets/video/test.mp4",
            "videoType": "video/mp4",
            "videoPlayPause": true,
            "videoStartOver": true,
            "videoWidth": 300,
            "videoHeight": 225 
        }
    ],
    "image": [
        {
            "imageSrc": "assets/image/test.jpg",
            "imageType": "jpg",
            "imgWidth": 300,
            "imgHeight": 225 
        }
    ]
}

在视频组件中，我需要从文件中获取视频对象，

在 video-component.ts 中，我具有以下代码，

    import { Component, OnInit, Input, ViewChild } from '@angular/core';

    @Component({
      selector: 'mrt-video-playback',
      templateUrl: './video-playback.component.html',
      styleUrls: ['./video-playback.component.scss']
    })
    export class VideoPlaybackComponent implements OnInit {

      @Input() videoConfiguration: object = config.json;

 }

在HTML中，我有

<div> {{videoConfiguration}} </div>

我知道以下一行是错误的

@Input() videoConfiguration: object = config.json;

但是我得到了一种这样的东西，我应该从json获取对象并将其存储到@Input。

在config.json文件中，我需要获取视频对象并将其传递给html，因为它是视频组件，我需要将视频中的值传递给html。正如我使用@Input一样，它也可以在其他组件中使用。

Answer 1

如果您要将数据从子级传递到父级，则必须使用Output属性Binding我在此处包括了示例请查看以下内容：https://stackblitz.com/edit/angular-o1ghlv

Answer 2

您可以使用JSON.parse（），

 @Input() videoConfiguration: object;

 constructor(private _http:Http){}

 ngOnInit(){
      this._http.get('assets/config.json')
      .subscribe((response) => { 
               this.videoConfiguration = JSON.parse(response.video)
      });
 }

但是，如果您将输入传递给选择器'mrt-video-playback'，那么它将覆盖其值，

<mrt-video-playback [videoConfiguration]="anyObject">

OR

您还可以将此值传递给选择器，

<mrt-video-playback [videoConfiguration]="configJson"> </mrt-video-playback>
 ngOnInit(){
          this._http.get('assets/config.json')
          .subscribe((response) => { 
                   this.configJson = JSON.parse(response.video)
          });
     }

如何在Angular中将JSON传递给@Input？

2 个答案: