在字符串变量中插入锚标记

Question

我正在尝试在字符串变量中插入锚标记。该字符串将在屏幕上显示为 link，但它似乎忽略了锚标记，只包含标记内的值。例如某些东西变成 'something'

private generateAnchors(content: string) {
    let contentToReturn = content;
    if (content.indexOf('@') < 0) return contentToReturn;
    else if (content.indexOf('@') > -1) {
        let tag = content.substring(content.indexOf('@'), content.indexOf(' ', content.indexOf('@')));
        let address = tag.substring(1, tag.length);
        let anchor = '<a href="/home/user/"'+address+'>'+tag+'</a>';
        console.log('found substr: '+tag, ' '+address+' '+anchor);
        contentToReturn.replace(tag, anchor);
        console.log('final string: '+contentToReturn);
    }
    return contentToReturn;
}

这在 Angular/TypeScript 中是如何完成的？

Answer 1

您是否尝试替换：

contentToReturn.replace(tag, anchor);

与：

contentToReturn = contentToReturn.replace(tag, anchor);

String.replace 不会更改您的字符串，因为它是不可变的，它只是 returns 完成替换的新字符串。

Angular Templating

除了这个小问题，您还应该考虑使用 Angular 的模板机制。你应该阅读文档来了解这一点，但我会尽量给你一个适合你特定情况的例子。

您将有一个 links.component.html 文件包含：

<a href="/home/user/{{address}}">{{tag}}</a>

如果您需要其中的几个，也可能是一个循环：

<div *ngFor="let link in links">
  <a href="/home/user/{{link.address}}">{{link.tag}}</a>
</div>

和对应的links.component.ts与对应的元素：

import { Component } from "@angular/core";

@Component({
  selector?: "app-links-component"
  templateUrl: "links.component.html"
})
export class LinksComponent {
  address: string;
  tag: string;

  constructor() {}

  // ts logic to fill address/tag information
}

或者第二种情况下的数组：

import { Component } from "@angular/core";

@Component({
  selector?: "app-links-component"
  templateUrl: "links.component.html"
})
export class LinksComponent {
  links: Link[] = [];

  constructor() {}

  generateAnchors(address: string, tag: string) {
    // You can bind this method to a form submit or something.
    this.links.push(new Link(address, tag));
  }
}

N.B.: 因为都是手写的，可能会有错别字...

在字符串变量中插入锚标记

Insert anchor tag in string variable

string

anchor

typescript

angular

Angular Templating