Question

我正在使用Ionic 2运行TypeScript应用，点击特定按钮后，我需要获取鼠标选择的HTML个项目。

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

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

我怎样才能在TypeScript中使其发挥作用？我已尝试将document.selection替换为.getSelection()等，但没有任何运气。

HTML

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

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

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

Answer 1

我认为你是以“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> 
   ...

所以现在你想要的所有功能都以formControl中的formGroup作为被动形式进行控制，我认为它允许更大的灵活性以及更好定义的代码组

您可以查看有关反应表单here

的官方文档

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

1 个答案: