如何使用角度2将组件注入到组件2

Question

我想注入一些html到我的组件（Angular 2）中，我用angularjs中的$ compile将html注入DOM，因为在我注入的html中我有一个方法犯规执行继承人的代码：

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 ）“，如代码中提到的，但是当我尝试点击这个跨度时，它的执行没有什么功能并没有解雇..任何帮助请

Answer 1

在这里，我们给templateUrl HTML将从给定的路径得到。

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

     } 


    }