홈>2020-12-17 08:06source

동적 ID 선택기를 사용하여 각도 v10에서 동적 구성 요소 표시

DOM 수정을 위해 ElementRef, ViewConatinerRef 및 Renderer2로 작업하고 있습니다. 하지만 지금은 동적 ID 선택기로 DOM에 구성 요소를 추가하려고합니다. @viewchild ()없이 이것을하는 방법

app.component.html

//<!-- <div #id_1></div> -->
<div [attr.id]= 'dynamicID'></div>

app.component.ts

export class AppComponent implements OnInit, AfterViewInit {
 dynamicID:string = 'id_1';
  // @ViewChild('id_1', { read: ElementRef}) ele;
  
  constructor(private vc:ViewContainerRef, private injector: Injector, private resolver: ComponentFactoryResolver, private render:Renderer2) { }
  ngOnInit() {
  }
  ngAfterViewInit() {
   
    let component = this.resolver.resolveComponentFactory(FirstComponent);
    let componetRef = component.create(this.injector);
    componetRef.instance.data = 'test data';
    let hostView = componetRef.hostView;
   //here how to get that dynamicID (id_1)  and append hostView to that 'dynamicID' div
  }
}

감사합니다

angular

답변 # 1
이를 수행하는 올바른 방법은 Angular의 ngFor 지시문을 사용하는 것입니다. HTML 템플릿의 JSON 배열/객체에 대해 for 루프를 실행할 수 있습니다. 기본 구문은 다음과 같습니다.
```
<div *ngFor="let item of data">
    {(item)}
</div>
```
data는 데이터베이스 응답이 저장되는 변수입니다. 필요에 따라 내용을 수정하십시오.

답변 # 2

많은 검색 끝에 해결책을 얻었습니다.

app.component.html

<div [attr.id]='dynamicID'></div>

app.component.ts

export class AppComponent implements OnInit, AfterViewInit {
dynamicID: string = 'test';
constructor(
    private eRef: ElementRef,
    private vc: ViewContainerRef,
    private injector: Injector,
    private resolver: ComponentFactoryResolver,
    private render: Renderer2,
    private app: ApplicationRef
   ) { }
  ngOnInit() {  }
  ngAfterViewInit() {
    let factory = this.resolver.resolveComponentFactory(GridComponent);
    let node = this.render.createElement('div');
    let html = document.querySelector('#' + this.dynamicID).appendChild(node);
    let componetRef = factory.create(this.injector, [],node);
    componetRef.instance.data = 'this is dynamically added component';
    this.app.attachView(componetRef.hostView);
  }
}

Python2.net

동적 ID 선택기를 사용하여 각도 v10에서 동적 구성 요소 표시

관련 자료