Angular 4:在Angular完成JQuery渲染后如何执行HTML码

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div id="myDiv"></div>'
})
export class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // 在视图初始化完成后执行HTML码
    document.getElementById('myDiv').innerHTML = '<p>Hello, Angular!</p>';
  }
}

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appExecuteHtml]'
})
export class ExecuteHtmlDirective {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // 在视图初始化完成后执行HTML码
    this.el.nativeElement.innerHTML = '<p>Hello, Angular!</p>';
  }
}

<div appExecuteHtml></div>

import { Injectable } from '@angular/core';

@Injectable()
export class HtmlService {
  getHtmlCode(): string {
    return '<p>Hello, Angular!</p>';
  }
}

import { Component } from '@angular/core';
import { HtmlService } from './html.service';

@Component({
  selector: 'app-my-component',
  template: '<div id="myDiv"></div>'
})
export class MyComponent {
  constructor(private htmlService: HtmlService) {}

  ngAfterViewInit() {
    // 在视图初始化完成后执行HTML码
    document.getElementById('myDiv').innerHTML = this.htmlService.getHtmlCode();
  }
}