Alt öğelerdeki bir öğenin değerini değiştirmek çalışmıyor

Question

Merhaba Bir bileşenin içindeki bir özelliğin değerini değiştirmek istediğim bir durum var. İşte ben bugüne kadar ne var:

import {Component, OnInit} from 'angular2/core'; 
import {TinymceComponent} from './../../../common/components/tinymce.component'; 

@Component({ 
    selector: 'templates', 
    directives: [TinymceComponent], 
    template: `<button (click)="update()">Update</button> 
       <tinymce [(description)]="product.description"></tinymce>` 
}) 
export class ProductEditComponent implements OnInit { 
    public product: any; 

    public ngOnInit() { 
     this.product = { 
      description: 'hello world' 
     } 
    } 

    public update(){ 
     console.log(this.product) 
    } 
} 

Ve bu benim TinyMceComponent geçerli:

import {Component, OnInit, Input} from 'angular2/core'; 
declare var tinymce: any; 

@Component({ 
    selector: 'tinymce', 
    template: '<textarea id="tinymce-editor"></textarea>', 
}) 
export class TinymceComponent implements OnInit { 
    @Input() description: string; 

    public ngOnInit() {  
     setTimeout(() => this.description = 'new text', 5000) 
    } 
} 

Ne anda gerçekleşiyor olduğu product.description değeri 'merhaba dünya' sonra bile olarak kalmasını setTimeout işlevi çalıştırılır ve 'new text' tanımını ayarlar

Yapmak istediğim şey, description özelliğini TinyMceComponent içindeki ürün modelinden değiştirebilmektir. Şimdi, yaklaşımımın doğru olup olmadığından emin değilim, bunun işe yarayacağını varsaydım çünkü bunun gibi bir şey açısal 1'de çalışıyordu ama yanılıyor olabilirim.

Bunu nasıl başarabileceğimi söyleyen var mı?

Answer 1

Plunker example'un hello world numarasını gösteremiyorum ve bu 5 saniye sonra new text olarak değişir.

tek yönlü bağlayıcı (üst çocuğa) sadece [description]

[(description)]="product.description" 

bağlama iki yönlü içindir yeterlidir ve bir

@Output() descriptionChange:EventEmitter = new EventEmitter(); 

yılında gerektirecektir için TinymceComponent

Answer 2

Yalnızca bir köşeli parantez kullanıyor olmalısınız, çünkü yalnızca bir input özelliğini tanımlamıştınız. Bileşeniniz herhangi bir etkinlik yaymıyor gibi görünüyor. Yani şablon aşağıdaki gibi görünmelidir: @Input özellikleri ve ()@Output özellikleri için geçerlidir parantez içindir []

<button (click)="update()">Update</button> 
<tinymce [description]="product.description"></tinymce> 

köşeli parantez.

Answer 3

working Demo

import {Component, Output,EventEmitter} from 'angular2/core'; 

@Output() descriptionChange:EventEmitter= new EventEmitter() 

ngOnInit() {  
     //setTimeout(() => this.description = 'new text', 5000) 
     this.descriptionChange.emit("new Text"); 
}