如何使用 TypeScript 获取所选元素的 HTML?

Question

我正在运行一个带有TypeScript的Ionic 2应用程序，单击特定按钮时，我需要获取鼠标选择的项目HTML。

我尝试了不同的解决方案，但这些似乎都不起作用。这很重要，因为如果所选文本中包含图像，我应该能够检索图像 URL。

使用我当前的解决方案，图像甚至不会显示在文本选择中。

我怎样才能让它在TypeScript工作？我尝试将document.selection替换为.getSelection()等，但没有任何运气。

---

.HTML

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

选择"确定"和图像时，输出应为

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

Answer 1

我认为您正在以"jquery方式"考虑这个问题。如果要对组件中的图像进行操作，则需要向要影响的属性添加[]。

例如，因为你想要一个动态图像，所以你需要应用属性绑定，你可以在你的组件中将其用作方法或变量。因此，您可以使用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，我认为这允许更大的灵活性以及更好地定义的代码组

您可以在此处查看有关反应式表单的官方文档