Я разрабатываю приложение Angular2, и у меня возникла проблема:
У меня есть набор различных объектов, которые можно выбрать с помощью пользовательского интерфейса. Каждый из этих объектов имеет набор параметров (разных для разных объектов), которые можно редактировать с помощью пользовательского интерфейса. Теперь я использую DynamicComponentLoader для вставки определенного компонента для выбранного в данный момент объекта, поэтому он может корректно обрабатывать его параметры. Проблема в том, что я не знаю, как привязывать данные текущего выбранного объекта к динамически вставленному компоненту параметров.
@Component({
selector: 'dynamic',
template: `<div>Options:</div>
<div>Property1: <input type="number" /></div>
<div>Property2: <input type="text" /></div>`
// template: `<div>Options:</div>
// <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div>
// <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>`
})
class DynamicComponent {
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Selected: {{currentSelection.name}}!</h2>
<div #container></div>
</div>
`
})
class App {
currentSelection = {name: 'Selection1', property1: 10, property2: 'test'};
constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) {
loader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
Здесь - это плункер, который поможет вам понять мой вопрос: