родителя-ребенок рекурсивной двухсторонний связывания в угловом 2.0

Question

Я хочу создать угловой компонент, который использует себя рекурсивен для создания всех видов ресурсов на основе jsonschema

Вы можете увидеть полный код here

Я знаю, что для создания двусторонней привязки данных мы можем использовать ngModel, но я не знаю, как использовать его в пользовательском компоненте.

Answer 1

Вы также можете использовать @Input и @Output, как описано ниже:

@Component({ 
    selector: 'custom', 
    template: ` 
    <div> 
     {{value}} - <span (click)="updateValue()">Update</span> 
    </div> 
    ` 
}) 
export class CustomComponent { 
    @Input() 
    value:string; 
    @Output() 
    valueChange:EventEmitter; 

    constructor() { 
    this.valueChange = new EventEmitter(); 
    } 

    updateValue() { 
    this.valueChange.emit('other value'); 
    } 
} 

Таким образом, экземпляр, который вы привязаны к значению пользовательского компонента будет использовать двухстороннее связывание. Когда updateValue вызывается в пользовательский компонент, соответствующее свойство (здесь someProperty) будет также обновляться в родительском компоненте:

@Component({ 
    (...) 
    template: ` 
    <custom [(value)]="someProperty"></custom> 
    `, 
    directives: [ CustomComponent ] 
}) 
export class MyComponent { 
    someProperty:string; 

    constructor() { 
    this.someProperty = 'test'; 
    } 
} 

Вот соответствующая plunkr: https://plnkr.co/edit/ubtMXpGefgybGK4A3Pho?p=preview.