Question

首先，我对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
        );
    }
}

这是我的服务代码：

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

知道如何让这项工作成功吗？

用javascript里面的Angular2组件渲染

0 个答案: