在Angular2中添加链接预览

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