如何使用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!')
}

}