ComponentFactoryResolver로 생성된 구성 요소와 함께 @Input을 사용하는 방법은 무엇입니까?

ComponentFactoryResolver로 생성된 구성 요소와 함께 @Input을 사용하는 방법은 무엇입니까?

Angular 2 구성 요소에서 동적으로 생성되는 @Input 속성을 정의하는 데 사용할 수 있는 방법이 있습니까?

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에서는 작동하지 않는 것 같습니다.이 변경을 하기 전에 "@Input()"으로 장식된 "selected" 속성이 있어서 Angular는 DOM에 다음을 추가했습니다.

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

이를 통해 CSS 클래스를 전환하도록 마크업을 동적으로 업데이트할 수 있었습니다.

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

일부 검색을 통해 "@Output"이 예상대로 작동할 수 있는 방법을 찾을 수 있었지만, @Input에 대한 어떤 것도 찾지 못했습니다.

추가 컨텍스트가 도움이 된다면 알려주시면 기꺼이 추가하겠습니다.

아니요, Angular2 바인딩은 구성요소 템플릿에 정적으로 추가된 구성요소 및 지시사항에서만 작동합니다.

다른 모든 상황에서는 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service 에 설명된 대로 공유 서비스를 사용합니다.

사용할 수도 있습니다.

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

14.1.0부터 Angular는 setInput() 메서드를 추가하여 구성 요소 참조에 @Input을 직접 설정하거나 업데이트했습니다.

this.componentRef.setInput('someInput', this.value);

이 방법을 사용하면 OnPush 변경 감지 전략을 사용하여 체크 구성 요소를 올바르게 표시할 수 있습니다.또한 동적으로 생성된 구성 요소가 변경 사항을 감지할 때 OnChanges 라이프사이클 후크가 실행되도록 보장합니다.

값이 변경될 경우 다음과 같은 접근 방식을 사용합니다.

@Input()
public value: string;    

ngOnInit(): void {
    this.viewContainerRef.clear();
    this.componentRef = this.viewContainerRef.createComponent(this.component);
}

ngOnChanges(changes: SimpleChanges): void {
    if (changes.value) {
        this.componentRef?.setInput('someInput', this.value); // Updated with every change from the parent component.
    }
}

ngOnDestroy(): void {
    this.componentRef?.destroy(); // Don't forget to destroy the component.
}

API

귄터 쇠흐바우어의 대답은 정확합니다.하지만 저와 마찬가지로 당신이 렌더링에 문제가 있다면,@Input구성 요소 템플릿의 데이터는 다음을 시도해야 합니다.

1. 코드를 생성하는 구성 요소 실행ngAfterViewInit.
2. 더하다componentRef.instance.ngOnInit()최후의 수단으로
3. 안에서.ngOnInit동적으로 생성된 구성 요소 실행의detectChanges의 방법ChangeDetectorRef.

언급URL : https://stackoverflow.com/questions/39280057/how-do-you-use-input-with-components-created-with-a-componentfactoryresolver