Javascript 如何与angular 2容器应用程序进行通信和外部HTML

使用Angular 2，我创建了一个需要加载外部html的应用程序，为了实现这一点，我使用了一个简单的节点api来提供外部html，并最终将这个外部文件呈现到Angular 2应用程序中。这正是我想要的，效果很好

app.component.html

<main>
  <h1>Hi, from the container</h1>
  <test-component></test-component> <!-- The external html -->
<main>

<main>
  <h2>Hi, Im the external file</h2>
</main>

<main>
  <h2>Hi, Im the external file</h2>
  <button (click)="hi()">say hi!</button>
</main>

嗨，从集装箱来的

myExternalFile.html

<main>
  <h1>Hi, from the container</h1>
  <test-component></test-component> <!-- The external html -->
<main>

<main>
  <h2>Hi, Im the external file</h2>
</main>

<main>
  <h2>Hi, Im the external file</h2>
  <button (click)="hi()">say hi!</button>
</main>

嗨，我是外部文件

测试组件.ts

import { Component, Input, Pipe } from '@angular/core';
import { Http } from '@angular/http';
import { BrowserModule, DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'test-component',
  template: `<div [innerHTML]="myExternalHTML"></div>`
})
export class TestComponent {

  myExternalHTML: any = "";

  constructor(http: Http, private sanitizer: DomSanitizer ) {
    http.get('http://localhost:5000/api/v1/todos') // my basic node app
      .subscribe((response: any) => {
        const externalHTML= 
        this.sanitizer.bypassSecurityTrustHtml(response.text());
        this.myExternalHTML= externalHTML;
      }, (error: any) => {
        console.log('Error: ' + error);
      })
  }

}

import { Component, Input, Pipe } from '@angular/core';
import { Http } from '@angular/http';
import { BrowserModule, DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'test-component',
  template: `<div [innerHTML]="myExternalHTML"></div>`
})
export class TestComponent {

  myExternalHTML: any = "";

  constructor(http: Http, private sanitizer: DomSanitizer ) {
    http.get('http://localhost:5000/api/v1/todos') // my basic node app
      .subscribe((response: any) => {
        const externalHTML= 
        this.sanitizer.bypassSecurityTrustHtml(response.text());
        this.myExternalHTML= externalHTML;
      }, (error: any) => {
        console.log('Error: ' + error);
      })
  }

// New method
hi() {
  console.log('we made connection!')
}

}

从'@angular/core'导入{Component，Input，Pipe}；
从'@angular/Http'导入{Http}；
从“@angular/platform browser”导入{BrowserModule，DomSanitizer}；
@组成部分({
选择器：“测试组件”，
模板：``
})
导出类TestComponent{
myExternalHTML:any=“”；
构造函数（http:http，私有sanitizer:domsanizizer）{
http.get（'http://localhost:5000/api/v1/todos“）//我的基本节点应用程序
.订阅（（响应：任意）=>{
常量外部HTML=
this.sanitizer.bypassSecurityTrustHtml（response.text（））；
this.myExternalHTML=externalHTML；
}，（错误：任意）=>{
console.log（'错误：'+错误）；
})
}
}

这样就可以了，之后我可以看到加载的html没有任何问题。现在我需要添加一个按钮，其中包含一个将在angular2容器上处理的操作

就像在外部html（myExternalFile.html）中添加一个按钮一样

嗨，我是外部文件
打声招呼！

并添加方法（test.component.ts）

从'@angular/core'导入{Component，Input，Pipe}；
从'@angular/Http'导入{Http}；
从“@angular/platform browser”导入{BrowserModule，DomSanitizer}；
@组成部分({
选择器：“测试组件”，
模板：``
})
导出类TestComponent{
myExternalHTML:any=“”；
构造函数（http:http，私有sanitizer:domsanizizer）{
http.get（'http://localhost:5000/api/v1/todos“）//我的基本节点应用程序
.订阅（（响应：任意）=>{
常量外部HTML=
this.sanitizer.bypassSecurityTrustHtml（response.text（））；
this.myExternalHTML=externalHTML；
}，（错误：任意）=>{
console.log（'错误：'+错误）；
})
}
//新方法
你好（）{
log（'我们建立了连接！'）
}
}

但是，我的控制台上没有收到任何消息。我怎样才能建立这种联系？因为所有的东西都已经编译好了。。。以这种方式添加和外部文件使我更加了解这种通信。

<main>
  <h2>Hi, Im the external file</h2>
  <button id="mybtn" (click)="hi()">say hi!</button>
</main>

嗨，我是外部文件
打声招呼！

app.component.ts

从'@angular/core'导入{Component，Input，Pipe}；
从'@angular/Http'导入{Http}；
从“@angular/platform browser”导入{BrowserModule，DomSanitizer}；
@组成部分({
选择器：“测试组件”，
模板：``
})
导出类TestComponent{
myExternalHTML:any=“”；
构造函数（http:http，私有sanitizer:domsanizizer）{
http.get（'http://localhost:5000/api/v1/todos“）//我的基本节点应用程序
.订阅（（响应：任意）=>{
常量外部HTML=
this.sanitizer.bypassSecurityTrustHtml（response.text（））；
this.myExternalHTML=externalHTML；
}，（错误：任意）=>{
console.log（'错误：'+错误）；
})
}
ngAfterViewInit（）{
让el=document.getElementById（'mybtn'）作为HTMLElement；
el.click（）；
}
//新方法
你好（）{
log（'我们建立了连接！'）
}
}

嗨，我是外部文件
打声招呼！

app.component.ts

从'@angular/core'导入{Component，Input，Pipe}；
从'@angular/Http'导入{Http}；
从“@angular/platform browser”导入{BrowserModule，DomSanitizer}；
@组成部分({
选择器：“测试组件”，
模板：``
})
导出类TestComponent{
myExternalHTML:any=“”；
构造函数（http:http，私有sanitizer:domsanizizer）{
http.get（'http://localhost:5000/api/v1/todos“）//我的基本节点应用程序
.订阅（（响应：任意）=>{
常量外部HTML=
this.sanitizer.bypassSecurityTrustHtml（response.text（））；
this.myExternalHTML=externalHTML；
}，（错误：任意）=>{
console.log（'错误：'+错误）；
})
}
ngAfterViewInit（）{
让el=document.getElementById（'mybtn'）作为HTMLElement；
el.click（）；
}
//新方法
你好（）{
log（'我们建立了连接！'）
}
}

首先，我不知道您为什么需要这样做，请记住这是一个安全问题。但您可以检查Angular编译器服务。一个可以帮助您理解它的示例：首先，我不知道您为什么需要这样做，请记住这是一个安全问题。但您可以检查Angular编译器服务。一个可以帮助你理解它的例子：我在上面得到了这个错误。你能帮我吗？错误：未捕获（承诺中）：NullInjectorError:StaticInjectorError（AppModule）[Http->ConnectionBackend]：StaticInjectorError（平台：核心）[Http->ConnectionBackend]：NullInjectorError:没有ConnectionBackend的提供程序！在组件的提供程序中添加ConnectionBackend。i、 提供者：[ConnectionBackend]我在上面遇到了这个错误。你能帮我吗？错误：未捕获（承诺中）：NullInjectorError:StaticInjectorError（AppModule）[Http->ConnectionBackend]：StaticInjectorError（平台：核心）[Http->ConnectionBackend]：NullInjectorError:没有ConnectionBackend的提供程序！在组件的提供程序中添加ConnectionBackend。i、 e，提供者：[连接后端]