角度2を使用してコンポーネントにhtmlを挿入する方法

Question

私のコンポーネント（角2）にいくつかのhtmlを注入したいのですが、私は注入されたhtmlにメソッドを持っているため、angularjsで$ compileを使用してhtmlをDOMに注入していました。

addTextField(){ 
    var newTextBoxDiv = $(document.createElement('div')) 
    .attr("id", 'TextBoxDiv' + this.counter); 

     newTextBoxDiv.after().html('<label>Textbox #'+ this.counter + ' : </label>' + 
    '<input type="text" name="textbox' + this.counter + 
    '" id="textbox' + this.counter + '" value="" >'+'<span 
    (click)="removeTextField(this.counter)" class="glyphicon glyphicon-remove pull- 
    right" style="z-index:33;cursor: pointer"> </span>'); 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
} 

removeTextField機能：

removeTextField(currentTextField){ 
    alert(currentTextField); 
} 

私はそれは私がそれで削除スパンを（クリック）を意味しているdyanamicallyテキストフィールドを追加しよう= "removeTextField（this.counter doesntの相続人のコードを実行） "コードに記載されているように、私はこのスパンをクリックしようとしたときの問題は何も実行しないfunc助けてください

Answer 1

ここでは、HTMLが与えられたパスから取得するtemplateUrlを与えています。

import {Component, OnInit} from '@angular/core'; 
    import { FormControl, FormGroup , Validators} from '@angular/forms'; 
    import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
    import {HttpClient} from '@angular/common/http'; 

    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent implements OnInit { 
    results:any; 
    constructor(private http: HttpClient){} 

    images: any[]; 

     ngOnInit() { 

     this.http.get('https://restcountries.eu/rest/v2/all').subscribe(data => { 
     debugger; 
      // Read the result field from the JSON response. 
      this.results = data; 
     }); 

     } 


    }