Подтвердить что ты не робот

Как вы используете @Input с компонентами, созданными с помощью ComponentFactoryResolver?

Существует ли метод, который можно использовать для определения свойства @Input компонента Angular 2, который был создан динамически?

Я использую ComponentFactoryResolver для создания компонентов в компоненте контейнера. Например:

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);

let componentRef = entryPoint.createComponent(componentFactory);

Где "entryPoint" что-то вроде этого в компоненте HTML:

<div #entryPoint></div>

И определяется в моем контейнере с помощью:

@ViewChild('entryPoint', { read: ViewContainerRef } entryPoint: ViewContainerRef;

Это хорошо работает, но я не могу найти способ заставить свойство @Input работать над вновь созданным компонентом. Я знаю, что вы можете явно устанавливать публичные свойства в классе компонентов, но это, похоже, не работает с ng-reflect. Перед этим изменением у меня было свойство "selected", украшенное "@Input()", в результате чего Angular добавило следующее в DOM:

<my-component ng-reflected-selected="true"></my-component>

С этим я смог динамически обновить разметку, чтобы переключить класс CSS:

<div class="header" [class.active-header]="selected === true"></div>

Основываясь на некоторых поисках, мне удалось найти способ заставить "@Output" работать так, как ожидалось, но я еще ничего не нашел для @Input.

Сообщите мне, если бы был полезен дополнительный контекст, и я был бы счастлив добавить его.

4b9b3361

Ответ 1

Нет, Angular2 привязки работают только с компонентами и директивами, статически добавленными к шаблону компонента.

Для всех других ситуаций используйте общие службы, как описано в https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Вы также можете использовать

let componentRef = entryPoint.createComponent(componentFactory);
componentRef.instance.someProp = 'someValue';
componentRef.instance.someObservableOrEventEmitter.subscribe(data => this.prop = data);