Angular2 ||如何给子组件提供两个输入。

时间:2016-09-25 14:31:23

标签: angular

我有两个组成部分。

父组件和子组件,我需要将两种类型的数据传递给子组件。 一个数据是JSON 第二个数据是String。

儿童组件

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

    @Component({
      selector: 'child',
      template: `<h1>{{header}}</h1>
<p>{{data}}</p>`,
    })
    export class child implements OnInit {
     //DECLERATIONS
      @Input('location-Data') data:string;
      header:string;
      data:string;
      constructor() { }

      ngOnInit() {
      }

    }

父组件

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

@Component({
  selector: 'app-standard-order',
  template: ' <location-selector [location-Data]='Sample Data}'></location-selector>',
})
export class StandardOrderComponent implements OnInit {


  //DECLERATIONS

  header: string
  reqDeliveryDate: string = "";


  constructor() { }

  ngOnInit() {
    this.getTodaysDate();
  }



}

在这里你可以看到我已经从主机组件向子组件输入了一个输入,即位置数据。它正在工作,我可以打印样本数据!! 接下来我需要从主机到子组件输入另一个字符串,即标头。 任何人都可以建议我解决这个问题吗?

1 个答案:

答案 0 :(得分:5)

您仍然可以使用其他属性的输入绑定将数据从父级传递给子级:

@Input('location-Data') data:string;
@Input header:string;

您可以在here

了解更多信息

希望这有帮助!