2016-09-25 13 views
1

私は2つのコンポーネントを持っています。Angular2 ||子コンポーネントに2つの入力を与える方法。

親コンポーネントと子コンポーネントでは、2つのタイプのデータを子コンポーネントに渡す必要があります。 1つのデータはJSON の2番目のデータは文字列です。

子コンポーネント

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



} 

あなたは私が子供のコンポーネント、すなわち位置データをホストコンポーネントからの入力を与えていることがわかります。それは働いて、私はサンプルデータを印刷することができます! 次に、ホストから子コンポーネント、つまりヘッダーに別の文字列を入力する必要があります。 誰でも私にこれを解決する方法を提案できますか?

+0

Uはあなたのヘッダーを入力として受け入れていないため、location-dataと同じ値を受け入れる必要があります。 – Manish

答えて

4

あなたはまだのような他の特性のために結合入力して、親から子へデータを渡すことができます:あなたはhere

・ホープ、このヘルプで詳細を見つけることができます

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

+0

私はこれを試しましたが、混乱はどのようにこの新しいテンプレートをホストテンプレートに入れるのでしょうか? '、 そうですか? –

+0

を使用できます。

関連する問題