Двунаправленное связывание с @Input

Question

Я пытаюсь создать очень простой компонент в Angular 2.0, настраиваемом выпадающем меню под названием <my-select>.

Я прохожу model в <my-select>, который я ожидаю быть обновленным, когда конечный пользователь выбирает вариант из выпадающего списка.

Plunker: http://plnkr.co/edit/iY1hG0q9rsgrR6ltKXW4?p=preview

Как видно из Plunker, только model объект локального до <my-select> обновляется, не model объект, который я прошел в от <app>. Что мне здесь не хватает? Как одно двустороннее связывание с пользовательским компонентом?

В угловом 1.x это было так же просто, как передать переменную в $scopedirective с использованием =.

Answer 1

В вашей MySelect необходимо выдать

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

а затем уведомляет родителей о измененном значении по modelChange.next(newValue);

Angular2: Passing values up from a component Смотрите также

Answer 2

Если вы используете объект вместо целого/примитивного для свойства входного сигнала, родитель будет видеть изменения, так как родитель и ребенок имеют один и тот же ссылку на объект. (Я предполагаю, что это несколько напоминает Угловое 1 = связывания). При таком подходе вам не нужно использовать события:

export class App { 
    model = {value: 1}; 

export class MySelect { 
    selectOption(event) { 
    this.model.value = event; 
    } 

Plunker

Я не уверен, если это рекомендованный подход (т. е. события могут быть единственным рекомендуемым методом для передачи информации родителям), но пример heavy-loader в руководствах Structural Directives использует описанную выше технику. Основной/родительский компонент имеет свойство массива logs, которое привязано к дочерним компонентам в качестве входных свойств. Детальные компоненты просто push() на этот массив, а родительский компонент отображает массив.