如何在angular 2 / typescript中附加html内容

Question

我想使用insertAdjacentHTML将HTML内容附加到div（＆＃39;单窗格＆＃39;）中，但没有任何反应。不知道我在这里缺少什么。

以下是我要添加的HTML内容---＆gt; 的 component.html

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我附加的打字稿代码---＆gt; 的 component.ts

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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