角度输入HyperLinks

Question

在我的代码中，我有一个输入字段，用户可以在其中输入一些内容。当用户输入并按下“完成”时，我希望输入是一个超链接。这是我的密码。我应该添加什么来使输入成为一个链接？

HTML：

<ng-container matColumnDef="FilePath" #filePath>
                                <th mat-header-cell *matHeaderCellDef> Dosya Yolu </th>
                                <td mat-cell *matCellDef="let row; let i = index">
                                    <span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>
                                    <mat-form-field floatLabel="never" *ngIf="EditIndex == i" class="w-100-p">
                                        <input matInput name="FilePath" [(ngModel)]="row.LabAnalysisFiles.FilePath" type="text">
                                    </mat-form-field>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="Actions">
                                <th mat-header-cell *matHeaderCellDef></th>
                                <td mat-cell *matCellDef="let row; let i = index">
                                    <div *ngIf="!isClosed">
                                        <button mat-icon-button *ngIf="EditIndex != i" (click)="editRow(row, i)">
                                            <mat-icon>edit</mat-icon>
                                        </button>
                                        <button mat-icon-button *ngIf="EditIndex == i"
                                            (click)="editRow(row, undefined)">
                                            <mat-icon>done</mat-icon>
                                        </button>

                                    </div>
                                </td>
                            </ng-container>
TS:


 testList: ILabConditionResult[] = [];
    filePath: ILabAnalysisFile;
        editRow(row: ILabConditionResult, index: number) {
            if (index == undefined) {
                if (
                    !row.LabAnalysisFiles.FilePath
                ) {
                    return;
                }
                this.testList = [];
            } else {
                this.testList = [];
            }
            this.EditIndex = index;
        }

Answer 1

要使文本显示为超链接，必须使用a标记和href属性。

因此，在代码中，您必须更改

<span *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</span>

至

<a href *ngIf="EditIndex != i">{{row.LabAnalysisFiles.FilePath}}</a>

请记住，如果单击链接，它将导航，因此，如果不需要此行为，则应添加：

(click)="$event.preventDefault()"