>source

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
  }
}

감사합니다


  • 답변 # 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);
      }
    }
    
    

관련 자료

  • 이전 javascript - TypeError를받는 Nuxt 저장소 돌연변이
  • 다음 go - paho 라이브러리로 mosquitto 20에 연결할 수 없습니다