지시선을 사용하여 두 개의 각 구성요소 사이에 선 그리기

tldr;

특정 응용 프로그램에는 두 항목이 관련되어 있다는 시각적 신호가 필요합니다. 이 효과를 달성하는 방법에는 여러 가지가 있지만 한 가지 간단한 방법은 리더 라인 NPM 패키지를 사용하는 것입니다. 패키지를 사용하면 요소를 생성자 함수에 전달하여 두 요소 사이에 선을 그릴 수 있습니다. 그런 다음 라이브러리가 인계받아 사용자 지정 옵션도 전달할 수 있습니다. 이 기사에서는 Angular 애플리케이션에서 라이브러리를 사용하여 두 Angular 요소 사이에 선을 그리는 방법을 보여 드리겠습니다.

설정(#설정)

시작하려면 먼저 npm 패키지를 설치해야 합니다.

$ npm install leader-line

그런 다음 scripts 파일의 프로젝트에 대한 angular.json 배열의 패키지에서 JavaScript 파일을 포함해야 합니다.

...
"scripts": ["node_modules/leader-line/leader-line.min.js"],
...

그러면 프로젝트에 대한 스크립트가 로드되어 응용 프로그램에서 라이브러리를 사용할 수 있습니다.

두 요소 사이에 선 그리기

leader-line 패키지로 두 요소 사이에 선을 그리려면 두 개의 HTML 요소를 LeaderLine 생성자에 전달해야 합니다. 시작 요소는 첫 번째 인수이고 끝 요소는 두 번째 인수입니다. 라인의 모양을 사용자 정의하는 세 번째 선택적 인수를 전달할 수 있습니다. 패키지를 사용하면 선을 매우 쉽게 그릴 수 있습니다.

이것에 대한 유일한 어려운 부분은 Angular 요소에 올바른 방식으로 액세스할 수 있는지 확인하는 것입니다. DOM 요소에 액세스하는 "각도 방식"에는 일반 JavaScript 응용 프로그램에서와 같이 document를 사용하는 것이 포함되지 않습니다.

const startingElement = document.querySelector('#starting-element');
const endingElement = document.querySelector('#ending-element');

const line = new LeaderLine(startingElement, endingElement);

이것이 일반 JavaScript 애플리케이션에서 DOM에 액세스하는 방법이지만 Angular는 이러한 방식으로 DOM에 직접 액세스하는 것을 권장하지 않습니다. Angular의 요소에 액세스하려면 ElementRef 및 ViewChild 또는 ViewChildren 를 사용해야 합니다. 예를 들어 이러한 주제here 또는 here에 대해 자세히 읽을 수 있습니다. 여기서는 이 주제에 대해 자세히 설명하지 않겠지만 간단히 말해서ViewChild 구성 요소의 클래스 파일에 있는 DOM 요소에 대한 액세스를 제공합니다. 다음은 클래스 파일 및 구성 요소 템플릿의 예입니다.

// app.component.ts
declare var LeaderLine: any;

export class AppComponent() implements AfterViewInit {
  @ViewChild('startingElement', { read: ElementRef }) startingElement: ElementRef;
  @ViewChild('endingElement', { read: ElementRef }) endingElement: ElementRef;

  ngAfterViewInit() {
    const line = new LeaderLine(startingElement.nativeElement, endingElement.nativeElement);
  }
}

<app-box #startingElement>Starting Element</app-box>
<app-box #endingElement>Ending Element</app-box>

ngAfterViewInit 메서드에서 라인을 생성하는 이유는 컴포넌트가 처음 초기화될 때 템플릿에서 요소를 사용할 수 없지만 ngAfterViewInit 메서드에서 사용할 수 있기 때문입니다. 이 방법으로 선을 만들 수 있으며 화면에 그려집니다.

라인 제거

LeaderLine으로 화면에 선이 그려지면 수동으로 제거할 때까지 유지됩니다. 구성 요소 레이아웃이 변경되면 선을 다시 그려야 할 수 있습니다. 줄에서 remove 메서드를 호출하여 로컬 변수의 줄에 계속 액세스할 수 있는 한 줄을 제거할 수 있습니다.

line.remove();

라인 옵션

LeaderLine은 라인 출력을 사용자 정의할 수 있는 많은 옵션을 제공합니다. 문서가 매우 훌륭하기 때문에 여기에서 모든 내용을 다루지는 않겠지만 각 HTML 요소, 경로 레이블 및 훨씬 더. Check out the documentation here 생성자에 전달할 수 있는 모든 옵션에 대해. setOptions 메서드를 호출하고 개체를 전달하여 행에 대한 옵션을 설정할 수도 있습니다.

결론

LeaderLine 패키지는 직장에서 가장 최근의 프로젝트에 정말 도움이 되었습니다. 우리는 워크플로 빌더(이 작업을 수행한 다음 이 작업을 수행하는 등)를 구축하고 있으며 워크플로를 시각적으로 표시하려면 한 요소에서 다음 요소로 선을 그려야 합니다. 화면에 그 선을 어떻게 하면 좋을까 고민했는데 이 패키지는 설치하기도 쉽고 작업하기도 쉬웠어요. 몇 분 만에 자체 솔루션을 롤링하는 데 며칠이 걸렸을 작업을 시작하고 실행할 수 있었습니다.