私は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();
}
}
あなたは私が子供のコンポーネント、すなわち位置データをホストコンポーネントからの入力を与えていることがわかります。それは働いて、私はサンプルデータを印刷することができます! 次に、ホストから子コンポーネント、つまりヘッダーに別の文字列を入力する必要があります。 誰でも私にこれを解決する方法を提案できますか?
Uはあなたのヘッダーを入力として受け入れていないため、location-dataと同じ値を受け入れる必要があります。 – Manish