如何使用TypeScript獲取選定元素的HTML？

我運行一個應用程序Ionic 2與TypeScript和我需要的物品的HTML，點擊一個特定的按鈕，當鼠標選中。如何使用TypeScript獲取選定元素的HTML？

我已經想盡了各種辦法，但這些都不似乎工作。這很重要，因爲如果圖像包含在所選文本中，我應該能夠檢索圖像URL。

從我目前的解決方案，圖像甚至在文本選擇中。

我怎麼能使其在TypeScript工作？我試過將document.selection換成.getSelection()等，但沒有任何運氣。

HTML

test ok <img src="./test.jpg" /> 

當好和圖像選擇，輸出應該是

ok <img src="./test.jpg" />

來源

2017-03-27 Kevin Van Ryckegem

你試過'window.getSelection（）'嗎？ –

@BenjaminDiaz這就是我現在使用的;輸出是：'好的'。雖然有斷行符，但是沒有可以找到的圖像，也沒有真正的HTML。 –

[JS中的答案]（http://stackoverflow.com/a/4177234/5021993） –

，我認爲你是在想着這是一個「 jquery方式「。如果您想對組件中的圖像執行操作，則需要將[]添加到要實現的屬性。

例如，因爲想要動態圖像需要應用property bindings，其可以在使用組分作爲方法或變量。所以，你可以在圖像標籤上的方法在src屬性添加功能直接

<img [src]="image()" />

而在組件添加

image(){ 
    // 
}

或轉讓，所以，當動作發生時分配圖像輸出到圖像標籤然後將它分配給一個變量

<img [src]="imageScr" /> 
<button ion-button (click)="onImageUpload()"> Add </button>

元器件

imageSrc:string = 'http://placehold.it/350x150'; 

constructor(...){} 

onImageUpload(){ 
    let uploadedImage = // get image stuff here 
    this.imageScr = uploadedImage; 
}

沒有太多的話題我會建議你爲你的輸入類型創建一個角度反應形式。這創建了一個更好的結構，其中包含功能烘焙功能，可幫助您實現所需的大部分功能因此，您可以添加一個formControlName而不是一個屬性綁定，而您的formGroup將保存所有表單輸入值。

import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

export class ImagePage{ 
    imageUploadForm: FormGroup; 
    imagePattern:string = '(?:([^:/?#]+):)?(?://([^/?#]*))?([^?#]*\.(?:jpg|gif|png))(?:\?([^#]*))?(?:#(.*))?' 

    constructor(public navCtrl: NavController, public navParams: NavParams, 
       public formBuilder: FormBuilder){ 

     this.imageUploadForm = this.formBuilder.group({ 
      image:['http://placehold.it/350x150',[Validators.required,Validators.pattern(this.imagePattern)]] 
      imageName:[''[Validators.required]] 
     }) 
    } 
}

，然後在Html

<form [formGroup]="imageUploadForm" novalidate> 

    <ion-item> 
     <ion-img width="80" height="80" [src]="imageUploadForm.get('image').value"></ion-img> 
     <input type="file" name="pic" accept="image/*" formControlName="image"> 
    </ion-item> 
    <ion-item class="item-error" > 
     <ion-label *ngIf="imageUploadForm.get('image').errors?.required"> Image is required </ion-label> 
     <ion-label *ngIf="imageUploadForm.get('image').errors?.pattern"> Image file must end in .jpg, .png or gif </ion-label> 
    </ion-item> 
    ...

所以現在要在活性形式的formGroup我認爲允許更大的靈活性，以及被控制作爲formControl功能作爲更好定義的一組代碼

您可以查看反應形式的官方文檔here

來源

2017-03-27 08:05:01

如何使用TypeScript獲取選定元素的HTML？

回答

相關問題