Угловой 6: как правильно динамически изменять содержимое компонента? - PullRequest
Новая
       17

Угловой 6: как правильно динамически изменять содержимое компонента?

0 голосов
/ 23 июня 2019

У меня есть угловой компонент, к которому мне нужно добавить HTMLE-элементы через vanilla JS, который необходим для какого-то проекта.

Я могу достичь цели, но я не уверен, что то, что я делаю, является лучшим способом в соответствии с некоторыми практиками Angular, например, избегайте манипулирования DOM-элементами компонента.

ContainerComponent

container.component.html 

<div>
    Hello!
    <div #div>
    </div>
</div>

container.component.ts 

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent {

  private _children: HTMLElement[];

  @ViewChild('div')
  private _divElemRef: ElementRef;

  @Input()
  set setChildren(wsJson: string) {
    console.error(wsJson);
    const ws: string[] = JSON.parse(wsJson);
    this._children = ws.map(v => eval(v));
    console.error(this._children);
    const divNative: HTMLDivElement = this._divElemRef.nativeElement;

    this._children.forEach(element => {
      divNative.appendChild(element);
    });
  }
}

затем я добавляю элементы способом, близким к следующему 

<app-container id="13456"></app-container>

<script>
  window.widget = {};

  let btn1 = document.createElement("button");
  btn1.textContent = "Dynamic1";
  window.widget['1'] = btn1;

  let widgetJSON = JSON.stringify(["window.widget['1']"])

  setTimeout(() => {
    console.error(widgetJSON);
    document.getElementById("13456").setChildren = widgetJSON;
  }, 5000);
</script>

Живой код можно найти на https://stackblitz.com/edit/angular-eyetha

Есть ли лучший способ достичь того же результата?

Ой!

...