각도 자동 연결 파이프

작업을 위한 소셜 플랫폼을 개발하면서 해시태그, URL, 전화번호, 이메일 등과 같은 공용 항목에 대한 링크 생성을 지원해야 한다는 것을 깨달았습니다. 본능적으로 누군가는 이에 대한 솔루션을 가지고 있습니다! 고맙게도 그것은 사실로 판명되었습니다( h/t Greg Jacobs ).

Autolinker.js을 Angular 파이프에 간단하게 구축하면 구현 노력이 거의 없이 엄청난 시간을 절약할 수 있다는 것을 알고 있었습니다. 그래서 라이브러리를 사용하여 필요한 개인 설정을 위한 사용자 정의 클래스를 만든 다음 단락 태그의 innerHTML 내에서 호출할 파이프를 만들었습니다. 그리고... 그게 전부였습니다!



클릭 가능한 "링크된"텍스트의 미리보기.

구현

따라서 이 작업을 직접 수행하는 방법을 간략히 보여드리기 위해 Ionic Angular을 사용하여 빠른 list starter 프로젝트를 구축했습니다. 전체 코드는 here에서 찾을 수 있습니다. 직접 시작하려면 다음을 사용할 수 있습니다.

$ ionic start ionic-linkify list --type=ionic-angular
$ cd ionic-linkify
$ ionic serve

준비가 완료되면 "메시지"데이터를 "트윗"데이터로 변환하는 작업을 했습니다. 가짜 트윗 데이터를 가져오는 것이 개념을 설명하는 좋은 방법이라고 생각했습니다. 나는 Simon Grimm이 그의 최근 작품 중 하나에 사용되었기 때문에 직접 만들 필요가 없었습니다. 변환에는 Tweet 개체에 대한 인터페이스를 모형화하고 Simon의 엔드포인트에서 서비스로 정적 트윗 목록을 붙여넣는 작업이 포함되었습니다. 예제를 단순하게 유지하고 필요한 HttpClient 논리를 구축하지 않기 위해 이렇게 했습니다. 빠르고 더러운 API 호출을 구축하기 위한 많은 예제가 있습니다. 서비스는 다음과 같습니다.

// data.service.ts
...
export interface Tweet {
  username: string;
  handle: string;
  like: number;
  retweets: number;
  response: number;
  text: string;
  link?: string;
  date: string;
  liked: boolean;
  retweet: boolean;
  attachment?: string;
  img: string;
}
...
export class DataService {
  ...
  public tweets: Tweet[] = [
    {
      username: "Max Lynch",
      handle: "maxlynch",
      like: 446,
      retweets: 173,
      response: 21,
      text:
        "Crazy, according to @appfigures, @Ionicframework is one of the top 4 development SDKs on both iOS and Android, and one of the top three 3rd party SDKs (more like top 2.5 since it overlaps w/ Cordova) Rocket",
      date: "1581322823",
      liked: true,
      retweet: false,
      attachment:
        "https://devdactic.fra1.digitaloceanspaces.com/twitter-ui/attachement-0.jpeg",
      img:
        "https://devdactic.fra1.digitaloceanspaces.com/twitter-ui/twitter-max.jpg",
    },
    ...
  ];

  ...

  public getTweets(): Tweet[] {
    return this.tweets;
  }
}

준비가 되면 "linkify"설정을 보관할 Linkifier 클래스를 만들었습니다. 따라야 할 클래스는 내 작업 프로젝트의 빌드에 구현한 것과 약간 다르게 보이지만 여기서는 좀 더 일반적인 사용 사례로 유지하고 싶었습니다.

// linkifier.ts
import { Autolinker, AutolinkerConfig, HashtagMatch } from "autolinker";

const AUTOLINKER_CFGS: AutolinkerConfig = {
  urls: {
    schemeMatches: true,
    wwwMatches: true,
    tldMatches: true,
  },
  email: true,
  phone: true,
  mention: "twitter",
  hashtag: "twitter",
  stripPrefix: false,
  stripTrailingSlash: false,
  newWindow: true,
  truncate: {
    length: 0,
    location: "end",
  },
  decodePercentEncoding: true,
};

export class Linkifier {
  private autolinker: Autolinker;

  constructor() {
    this.autolinker = new Autolinker(AUTOLINKER_CFGS);
  }

  public link(textOrHtml: string): string {
    return this.autolinker.link(textOrHtml);
  }
}

그런 다음 파이프에 추가할 시간입니다.

// linkify.pipe.ts
...
@Pipe({
  name: "linkify",
})
export class LinkifyPipe implements PipeTransform {
  private linkifer: Linkifier;

  constructor() {
    this.linkifer = new Linkifier();
  }

  transform(value: string): string {
    return this.linkifer.link(value);
  }
}

@NgModule({
  declarations: [LinkifyPipe],
  exports: [LinkifyPipe],
})
export class LinkifyPipeModule {}

따라서 파이프의 변환은 매우 간단합니다. Linkifier가 생성자에서 초기화되고 백그라운드에서 필요한 모든 논리를 유지한 후에는 link 함수를 호출하여 값을 반환하기만 하면 됩니다. 위의 클래스에서 볼 수 있듯이 이 함수는 단지 텍스트 또는 html을 가져와 구성에서 설정한 규칙에 따라 "링크"합니다. 그런 다음 적절한 HTML 를 반환합니다. 이것이 우리가 innerHTML의 p tag에 결과를 저장하여 링크로 적절하게 렌더링하는 이유입니다.

<p [innerHTML]="tweet.text | linkify"></p>

좋습니다. 위에서 정의한 LinkifyPipeModule를 사용하기 위해 Tweet 구성 요소 모듈로 가져오고 트윗 출력을 수정하면 결과가 나타납니다!





다시, 코드의 전체 사본을 보려면 github repo !