如何使用angular 2容器应用程序与外部HTML通信

Question

使用Angular 2，我创建了一个需要加载外部html的应用程序，为实现此目的，我做了一个简单的node api服务于外部html，最后将此外部文件渲染到我的angular 2应用程序中。 这就是我想要的，效果很好。

app.component.html

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

myExternalFile.html

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

test.component.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);
      })
  }

}

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

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

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

并添加方法（test.component.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);
      })
  }

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

}

但是，我的控制台上没有收到任何消息。 如何建立这种联系？ 由于所有内容都已被编译...以这种方式添加和添加外部文件使我对这种通信更加了解。

Answer 1

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

app.component.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);
      })
  }

ngAfterViewInit(){
let el = document.getElementById('mybtn') as HTMLElement;
el.click();
}
// New method
hi() {
  console.log('we made connection!')
}

}