如何在使用Angular 2的腳本代碼中使用innerHTML

如何在使用Angular 2 RC4的typescript代碼中使用innerHTML？我有這個問題：當用戶點擊一個特定的按鈕我想添加一些預編譯的HTML代碼。例如：如何在使用Angular 2的腳本代碼中使用innerHTML

打字稿代碼

private addHTML() { 
    // the html go there I suppose, I don't know how to implement this part 
}

HTML代碼

<div class="form-group row"> 
<label for="exampleSelect1" class="col-xs-2 col-form-label">My HTML code</label> 
<div class="col-xs-10"> 
    <button type="button" class="btn btn-primary" (click)="addHTML">ADD</button> 
</div> 
<hr>

或者，也許這是一種錯誤的方式。讓我知道，提前謝謝。

來源

2016-09-17 Daniel Zarioiu

事情是這樣的，也許：

htmlYouWantToAdd; 

private addHTML() { 
    this.htmlYouWantToAdd = "<b>Some HTML you want to display</b>"; 
}

而且你的HTML：

<div class="form-group row"> 
<label for="exampleSelect1" class="col-xs-2 col-form-label">My HTML code</label> 
<div class="col-xs-10"> 
    <button type="button" class="btn btn-primary" (click)="addHTML()">ADD</button> 
</div> 
<hr> 
<div *ngIf="htmlYouWantToAdd" [innerHTML]="htmlYouWantToAdd"></div>

來源

2016-09-17 23:13:56

這種方法的工作，但只有一次。如果我點擊第二次或第三次，它不會添加html。你有什麼建議嗎？提前致謝。 –

@DanielZarioiu你是什麼意思？我剛剛測試了它 - 創建了一個方法將'htmlYouWantToAdd'設置爲null，並且在我再次調用'addHTML'後，它就可以工作。 –

好的，我的代碼有問題。感謝您的解決方案，它工作得非常好！ –

如何在使用Angular 2的腳本代碼中使用innerHTML

回答

相關問題