如何以角度将JSON传递给@Input？答案

【问题标题】：How to pass JSON to @Input in angular?如何以角度将JSON传递给@Input？
【发布时间】：2018-07-10 10:53:53
【问题描述】：

有没有办法直接将一个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，它也可以用在其他组件中。

【问题讨论】：

您可以只 JSON.parse 文件并将其作为输入传递
您是想将数据从父级传递给子级，还是要将数据发送给子级到父级
@ChellappanV，是的，我想将数据从父母传递给孩子..

标签： javascript json angular typescript io

【解决方案1】：

如果您想将数据从子级传递给父级，那么您必须使用输出属性绑定我在这里包含了示例检查一下：https://stackblitz.com/edit/angular-o1ghlv

【讨论】：

您能否提供将数据发送给孩子的解决方案，因为我期待这两个方面的解决方案，并且因为我是初学者，所以它会更有帮助。

【解决方案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">

或

你也可以把这个值传给选择器，

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

【讨论】：