2017-04-04 10 views
-1

[sub.component.html inputBox]から[app.component.ts]に値を送信する方法を教えてください。角型のデータをコンポーネントに送信

sub.component.html

<input type="text"> 

sub.component.ts

@Component({ 
    selector: 'app-sub', 
    templateUrl: './sub.component.html' 
}) 
export class SubComponent{ 
    constructor() { } 
} 

app.component.html

{{input1}}<br /> 
{{input2}} 
<app-sub></app-sub> 
<app-sub></app-sub> 

app.component.ts

export class AppComponent { 
    input1 = ''; 
    input2 = ''; 
} 

app.component.htmlの2つの[app-sub]のinputBoxに値を設定します。 変数input1にinputBoxに入れた値を入れたい& input2。 どのようにわからないのですか?

+1

これはあなたを助ける必要があります。https://角度。 io/docs/ts/latest/cookbook/component-communication.html#特に親は子イベントを聞きます* :) – Alex

答えて

0

http://qiita.com/gambare/items/b75f9c9dc997ae45c092

日本語を使用して申し訳ありません。 最終的に私はこの記事を解決しました。

app.component.ts

export class AppComponent { 
    input1 = ''; 
    input2 = ''; 
 inputfanc(in1,in2){ 
    this.input1 = in1; 
    this.input2 = in2; 
    } 
} 

sub.component.ts

@Component({ 
    selector: 'app-sub', 
    templateUrl: './sub.component.html' 
}) 
export class SubComponent{ 
    constructor() { } 
    @Output() onVoted = new EventEmitter<boolean>(); 
    var val=""; 
    vote() { 
    this.onVoted.emit(this.val); 
    } 
} 

sub.component.html

<input type="text" [(ngModel)]="val"> 
<button (click)="vote()">button</button> 
+0

これは基本的なAngula無数のチュートリアル、ブログエントリ、およびハウツー記事だけでなく、Angularドキュメントによく記述されている知識も含まれます。 –

関連する問題