Question

HTML

<form> 
<input type="text" class="inputBoarder" name="urlName"[(ngModel)]="url" 
placeholder="http://"> 
<iframe [src]=myUrl></iframe> 
</form> 

TS

private myUrl; 
private url= 'https://www.youtube.com/watch?v=KMX1mFEmM3E'; 
constructor(domsanitizer: DomSanitizer) { 
this.myUrl = domsanitizer.bypassSecurityTrustResourceUrl(this.url); 
} 

我希望能夠爲我的東西粘貼到輸入字段儘快添加一個鏈接視圖。現在我能夠添加視圖，如果我有鏈接硬編碼，但它不會重新加載粘貼一個新的。

Answer 1

HTML：

<form> 
<input type="text" class="inputBoarder" name="urlName" [ngModel]="url" (ngModelChange)="onChange($event.target.value)" 
placeholder="http://"> 
<iframe [src]=myUrl></iframe> 
</form> 

TS：

private myUrl; 
private url= 'https://www.youtube.com/watch?v=KMX1mFEmM3E'; 
constructor(private domsanitizer: DomSanitizer) { 
    this.myUrl = domsanitizer.bypassSecurityTrustResourceUrl(this.url); 
} 

onChange(url) 
{ 
    this.url = url; 
    this.myUrl = this.domsanitizer.bypassSecurityTrustResourceUrl(this.url);  
}