Angular2 form alanı çok basit bir form var Angular2 yılında değişken

Question

@input üzerinde geçiş değildir:

Form.ts bu Plunkr gösterildiği gibi

import {Component, Input} from 'angular2/core' 

@Component({ 
    selector: 'my-form', 
    providers: [], 
    template: ` 
    <form> 

     {{ details }} 

     <input type="text" placeholder="name" /> 
     <input *ngIf="details" type="text" placeholder="details" /> 
    </form> 
    `, 
    directives: [] 
}) 
export class MyForm { 

    @Input() details: bool; 

    constructor() { 

    } 
} 

, ben details geçiş @ Düğme aracılığıyla giriş, metin doğru ve yanlış arasında değişir.

Ancak *ngIf, metin alanını hiç değiştirmiyor.

Burada neleri özlediğim hakkında bir fikrin var mı?

App.ts

import {Component} from 'angular2/core' 
import {MyForm} from './form' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <button (click)="toggle()">toggle details</button> 
     <my-form details="{{visible}}"></my-form> 
    </div> 
    `, 
    directives: [MyForm] 
}) 
export class App { 

    visible: boolean = false; 

    constructor() { 
    this.name = 'Angular2' 
    } 

    toggle() { 
    this.visible = !this.visible; 
    } 
} 

Answer 1

yerine aşağıdaki kullanmalıdır: yerine bu bağlayıcı özelliğini kullanmanıza olanak sağlar

<my-form details="{{visible}}"></my-form> 

ait

<my-form [details]="visible"></my-form> 

, yani tek yönlü bağlama (referans olarak). Bu, sağlanan ifade değiştiğinde alt bileşen güncellemeyi görebileceği anlamına gelir.

Sizin durumunuzda, alt bileşenin girdisini, enterpolasyonu kullanarak visible ifadesinin değeriyle sadeleştirin. Ancak, alt bileşeniniz güncellemeleri görmez.

Ayrıca sizin durumunuzda, bir dize değil, bir boole sağlarsınız. Sadece özellik ciltleme, dize dışında farklı türler sağlar ...

Çalışma plunkr: https://plnkr.co/edit/z7rKGb6mLdLNj2jtSlcU?p=preview bakın.

Answer 2

kullanımı yerine

<my-form [details]="visible"></my-form> 

Plunker

<my-form details="{{visible}}"></my-form> 

'true'visible için (stringifies) geçer. [details] ile değiştirilmemiş değer iletilir. Bu nedenle, string'dan farklı bir şey geçirmek istiyorsanız bu formun kullanılması gerekir.