Question

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

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不会更改您的字符串，因为它是不可变的，它只会返回一个新的字符串并完成替换。

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。：由于这一切都是用心写的，所以可能会有拼写错误......

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

1 个答案:

Angular Templating