Как добавить html-контент в angular 2 / typcript

Question

Я хочу добавить HTML-контент в div ('single-pane'), используя insertAdjacentHTML, но ничего не происходит.Не уверен, что мне здесь не хватает.

Вот мой HTML-контент, который я пытаюсь добавить ---> component.html

  <div #notification class="notification-top-bar" style="display: block;">
  </div>

Вот мой машинописный код, куда я добавляю ---> component.ts

export class SiteNotificationComponent implements OnInit {
  @ViewChildren('notification') private notificationsElements:  QueryList<ElementRef>;
  parentClass: any;

  constructor() {}
  ngOnInit() {} 
 
  ngAfterViewInit() {
    this.parentClass = document.getElementsByClassName('single-pane')[0];
    this.parentClass.insertAdjacentHTML('afterbegin', 'notificationsElements');
  }
}

Answer 1

Используйте ViewChild вместо ViewChildren, если у вас есть только один элемент типа уведомления.И объявить его типа ElementRef.

export class SiteNotificationComponent implements OnInit {
  @ViewChild('notification') el:ElementRef;
  parentClass: any;

  constructor() {}
  ngOnInit() {} 

  ngAfterViewInit() {
    this.parentClass = document.getElementsByClassName('single-pane')[0];
    this.parentClass.insertAdjacentHTML('afterbegin', this.notificationsElements.nativeElement.innerHTML);
  }
}