組件輸入屬性上的雙向數據綁定

我想在angular2上做一些工作，但無法找到有關此行爲的信息。組件輸入屬性上的雙向數據綁定

我有一個實現這樣一個自定義組件的應用程序：

import {Component,Input} from 'angular2/core' 
    @Component({ 
     selector:'my-comp', 
     template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}}</p>` 
    }) 

    export class MyComp{ 
     @Input() inputText : string; 
    }

，我試圖做雙向綁定我inputText變量從我的部分是這樣的：

<my-comp [(inputText)]="testString"></my-comp>

其中testString是包含字符串的MyApp.ts中定義的變量。當我的inputText被用戶修改時，我想要修改我的testString變量。

下面是一個簡單的示例代碼Plunker：https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview

有沒有辦法讓這個工作簡單一點嗎？我是否必須在自定義組件和重載函數上實現Angular2類才能使其工作如同ngModel？我一定要創建EventEmitter類型時，它改變了我的發射數據的inputTextChanged變量，做這樣的事情：

3210

預先感謝您。

來源

2016-01-05 David Gonzalez

是的，你必須創建一個事件發射器「inputTextChanged」，並在組件中激發事件。然後[（inputText）]應按預期工作。 – pixelbits

作爲一個通知：在Angular2中沒有像雙向數據綁定這樣的事情，但是你可以有類似的行爲。 http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 – jornare

那麼根據官方網站上的Angular2 Cheat Sheet：「 \t 設置雙向數據綁定。相當於：「。所以我認爲我們可以說在Angular2中存在雙向數據綁定。 –

這在模板語法文檔進行了說明，在Two-Way Binding with NgModel部分：

<input [(ngModel)]="currentHero.firstName">

在內部，角映射的術語，ngModel，涉及一種ngModel輸入屬性和輸出ngModelChange屬性。這是一個更一般模式的具體示例，它將[(x)]與輸入屬性x匹配爲屬性綁定，並將xChange輸出屬性與Event Binding匹配。

如果我們有這樣的心情，我們可以編寫自己的雙向綁定指令/組件。也

注意[(x)]僅僅是一個屬性綁定語法糖和事件綁定：

[x]="someParentProperty" (xChange)="someParentProperty=$event"

在你的情況，你想

<my-comp [(inputText)]="testString"></my-comp>

所以你的組件必須有inputText輸入屬性和一個inputTextChange輸出屬性（這是一個EventEmitter）。使用

inputTextChange.emit(newValue);

在你的情況下，該MyComp組分結合輸入屬性inputText：

export class MyComp { 
    @Input() inputText: string; 
    @Output() inputTextChange: EventEmitter<string> = new EventEmitter(); 
}

爲了通知的變化，每當你的組件改變的inputText值的父，發出一個事件[(x)]格式轉換爲ngModel，因此您使用事件綁定(ngModelChange)來通知變更，並在該事件處理程序中通知了變更的父組件。

在沒有使用ngModel的其他場景中，重要的是當事件inputText的屬性值在MyComp組件中發生變化時，emit()事件。

來源

2016-01-05 16:28:49

更新Angular4：在子組件中，不再需要指定EventEmitter輸出。這由@input自動處理。父視圖： <我-COMP [（inputText的）] = 「的TestString」> 兒童組件：出口類MyComp { @input（）的inputText：字符串; } – switch87

您的Plunker已包含EventEmitter。缺少@Output()註釋。要更改值調用inputTextChanged.emit(newValue)（這也改變了對inputText值）

來源

2016-01-05 10:08:46

是的，對不起，我是新來的笨蛋，忘記把砰砰聲鎖定到我想讓你看到的狀態，並繼續我的測試，所以你看到我的修改。 –

郝我只記得，我不知道你是否知道它，但至少從Angular2的測試版本「.next（）」被棄用，你應該使用「.emit（）」。 –

謝謝！沒有看到。 –

我會結合@pixelbits和@君特Zöchbauer答案和評論，使我的問題一個明確的答案，如果有人在將來尋找這一點。

要使雙向數據綁定對自定義變量有效，您需要根據以下內容創建組件。

MyComp.ts文件：

import {Component,Input,Output,EventEmitter} from 'angular2/core' 
@Component({ 
    selector:'my-comp', 
    templateUrl:`<input type="text" style="text-align:center;" 
    [ngModel]="inputText" (ngModelChange)="inputText=$event;inputTextChange.emit($event);">` 
}) 

export class MyComp{ 
    @Input() inputText : string; 
    @Output() inputTextChange = new EventEmitter(); 
}

MyApp.ts文件：

import {Component} from 'angular2/core' 
import {MyComp} from './MyComp' 

@Component({ 
    selector:'my-app', 
    templateUrl:`<h1>Bidirectionnal Binding test </h1> 
    <my-comp [(inputText)]="testString"></my-comp><p> 
    <b>My Test String :</b> {{testString}}</p>`, 
    directives:[MyComp] 
}) 

export class MyApp{ 
    testString : string; 
    constructor(){ 
    this.testString = "This is a test string"; 
    } 
}

有雙向數據綁定到inputText變量正常工作。您可以評論答案，以獲得更美觀或更簡單的方式來實現此代碼。

來源

2016-01-05 10:30:37

組件輸入屬性上的雙向數據綁定

回答

相關問題