内置javascript的Angular2组件渲染

首先，我对Angular2（或任何其他版本）非常陌生，我已经学习了一些教程来开始学习，但我现在已经走到了死胡同，我不知道如何继续。 以下是背景：我通过POST请求访问第三方web API（我在服务中这样做了），它返回我需要在页面上呈现的控件的HTML标记，因此我制作了一个组件。它工作得很好（不过我必须创建一个自定义管道来处理DOM清理）

这是我的问题：在我从web API接收到的标记中，有JavaScript东西来初始化控件，该控件应该在它出现在页面上时立即执行（它在我使用该控件的所有其他语言中都有，PHP、Java、JavaScript、ASP.NET等），但出于某种原因，使用Angular2我可以在DOM中看到脚本，正确插入到标记的末尾，但它不会执行，因此我的控件无法工作

以下是我的组件代码：

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

import { MyService } from './my.service'

@Component({
    selector: 'mycontrol',
    template: `<div style="width:1200px; height:1000px;" [innerHtml]="htmlContent | keepHtml"></div>`,
    styleUrls: ['app/control-min.css'],
    encapsulation: ViewEncapsulation.None
})

export class MyComponent implements OnInit {
    htmlContent: any;

    constructor(private myService: MyService) {
    }

    ngOnInit(): void {
        this.myService.getControlMarkup().subscribe(
            response => this.htmlContent = response["HtmlContent"],
            error => this.htmlContent = <any>error
        );
    }
}

---

你知道我该怎么做吗？

这个问题的公认答案有帮助吗？我想是的，因为这正是我的问题，但由于我缺乏专业知识，我真的不知道如何实现这一点……在实现这一点的过程中，你面临什么问题？主要的问题是我应该什么时候这样做？因为

this.htmlContent

在从服务调用返回之前是未定义的，如果我在调用服务后立即执行此操作，“未定义”显然会被插入。我试图把它放在

ngAfterViewInit

中，希望它能被填充，但它也不起作用。我不明白，但你应该在分配

this.htmlContent

一个值后再做。在这一行之后做

this.htmlContent=response[“htmlContent”]

这个问题的公认答案有用吗？我想是的，因为这正是我的问题，但由于我缺乏专业知识，我真的不知道如何实现这一点……在实现这一点的过程中，你面临什么问题？主要的问题是我应该什么时候这样做？因为

this.htmlContent

在从服务调用返回之前是未定义的，如果我在调用服务后立即执行此操作，“未定义”显然会被插入。我试图把它放在

ngAfterViewInit

中，希望它能被填充，但它也不起作用。我不明白，但你应该在分配

this.htmlContent

一个值后再做。在这一行之后做

this.htmlContent=response[“htmlContent”]

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class MyService {
    headers: Headers;
    options: RequestOptions;

    constructor(private http: Http) {
        this.headers = new Headers({ 'Content-Type': 'application/json' });
        this.options = new RequestOptions({ headers: this.headers });
    }

    getControlMarkup() {
        let controlConfig = {
            SessionId: "mySessionId",
            ControlId: "MyControl1"
        };
        let body = JSON.stringify(controlConfig);
        return this.http
            .post('http://localhost:62968/api/GetControl', body, this.options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any) {
        let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}