Блог

Главная - Вопросы по программированию - отображение динамического компонента в angular v10 с помощью динамического селектора идентификаторов

отображение динамического компонента в angular v10 с помощью динамического селектора идентификаторов

#angular

#angular

Вопрос:

Я работаю с ElementRef, ViewConatinerRef и Renderer2 для изменения DOM. но теперь я пытаюсь добавить компонент в 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. Чего именно вы пытаетесь достичь в DOM? Angular выступает против прямого управления DOM и предпочитает изменения пользовательского интерфейса на основе переменных изменений в коде. Можно ли использовать этот подход для достижения того же результата?

2. Я новичок в angular. Я не знаю, какой способ лучше. В моем проекте заполнители (динамические divs) являются динамическими. Эти заполнители поступают из базы данных, и на основе заполнителя мы можем прикрепить компонент к DOM. например, такие заполнители, как <div id=»div_1″></div><div id=’div_2′></div>.

3. Итак, вы хотите заполнить список divs с номером, зависящим от ответа из базы данных?

4. да @DelwynPinto. содержимое html, сохраненное в базе данных на основе пользователя. Разные пользователи содержат разные html. В этом html мы настроили идентификаторы. На основе этих идентификаторов мы можем добавить соответствующий компонент

Ответ №1:

После долгих поисков я получил решение.

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

Ответ №2:

Правильный способ сделать это — использовать директиву Angular ngFor. Это позволяет запускать цикл for над массивом / объектом JSON в шаблоне HTML. Его основной синтаксис

 <div *ngFor="let item of data">
    {(item)}
</div>

данные будут переменной, в которой хранится ответ базы данных. Измените содержимое между ними так, как вам нужно.