url 경로와 조회 매개 변수와 각도 구성 요소 필드를 자동으로 동기화합니다

만약 당신의 Angular 프로그램의 사용자가 다른 사람에게 링크를 보내기만 한다면, 그들은 그의 화면에서 완전히 같은 것을 볼 수 있을 것이다. 이것은 좋지 않습니까?
사용자는 URL을 책갈피에 추가하고 언제든지 같은 보기로 되돌아갈 수 있습니다.
각도 공유기를 사용하면 매우 동적 보기가 있어도 이 점을 할 수 있다.
그러나 이 방면의 작업과 샘플 코드는 상당히 방대하기 때문에 내가 작성한 라이브러리는 쉽게 피할 수 있다.내 첫 npm 가방❤️)
이 배후의 개념은 심도 있는 링크다.

심층 링크란 무엇입니까?

깊이 있는 링크와 Angular Router를 사용하는 방법에 익숙하다면 계속하십시오here.
만약 당신이 도서관을 위해 인터넷 응용 프로그램을 구축한다면, 한 사용자가 사용 가능한 도서 목록을 훑어보고 있을 것이다.그는 친구에게 보여주려고 책 한 권을 골랐다.
심도 있는 링크를 통해 선택한 책의 정보는 URL의 일부로 사용자 간에 쉽게 공유할 수 있다.각도 응용 프로그램에서 현재 뷰에 영향을 주는 모든 매개변수는 동일한 작업을 수행할 수 있습니다.예를 들어, 다음과 같이 검색 문자열을 추가합니다.

위의 예시와 같이, 당신은 이 매개 변수를 URL에 쓸 수 있습니다. 아래와 같습니다.

경로 매개 변수library/:location/books/:selectedBookId 또는

조회 매개 변수...?searchString=jon&secondParameter=1.

경로 파라미터는 문자열이나 숫자일 수도 있고, 조회 파라미터는 복잡한 json 대상일 수도 있다

어떻게 각 공유기와의'심도 링크'를 실현합니까?

어셈블리에서 주입ActivatedRouteSnapshot을 사용하여 현재 경로와 질의 매개변수를 가져올 수 있습니다.

export class YourComponent implements OnInit {
    private yourPathParam: number;
    private yourQueryParam: string;

    constructor(private readonly activatedRouteSnapshot: ActivatedRouteSnapshot) {}

    ngOnInit() {
        const pathParams: Params[] = this.activatedRouteSnapshot.params;
        this.yourPathParam = pathParams['yourPathParam'];

        const queryParams: Params[] = this.activatedRouteSnapshot.queryParams;
        this.yourQueryParam = queryParams['yourQueryParam'];
    }
}

ActivatedRoute 대신 ActivatedRouteSnapshot URL 매개 변수의 변경 사항을 구독할 수 있습니다.

this.activatedRoute.params.subscribe((newPathParams) => console.log(newPathParams));
this.activatedRoute.queryParams.subscribe((newQueryParams) => console.log(newQueryParams));

거꾸로는?구성 요소의 필드가 변경되면 주입 Router 을 통해 새 URL을 탐색할 수 있습니다.

this.router.navigateByUrl(newUrl);

여기서 가장 어려운 부분은 새로운 URL을 찾는 것이다.기존 매개 변수를 변경하고 싶지 않을 수도 있지만, 구성 요소에서 관심 있는 매개 변수만 변경하고 싶을 수도 있습니다.
그러나 이것은 '깊이 있는 링크' 를 실현하는 관건적인 부분입니다. 보기가 변할 때마다 URL을 업데이트해야 하기 때문입니다.

각도 라우터의 단점

보시다시피 url 매개 변수와 구성 요소 필드를 동기화하는 것은 매우 어렵습니다. 대량의 '샘플 코드' 가 필요합니다.
각도 라우터의 문제는 다음과 같습니다.

url 파라미터를 구성 요소에 연결하여 입력하는 방법을 설정하지 않았습니다.

A github issue 이 요구는 2017년부터 효력이 발생한다

구성 요소 필드의 변경 사항을 업데이트하는 간단한 방법이 없음(예를 들어 구성 요소를 통해 출력)

ngx 깊이 링크의 간단한 방법

구성 요소 필드와 URL의 동기화만 설정하면 어떻게 됩니까?
Ngx-deep-linking 경로 구성에서 이 작업을 수행할 수 있는 방법을 제공합니다.
마지막으로 너는 세 가지만 필요해.

@jdrks/ngx 깊이 링크를 설치해야 합니다.

npm install @jdrks/ngx-deep-linking 또는

yarn add @jdrks/ngx-deep-linking

깊이 있게 링크할 필드@Input와 @Output를 제공해야 합니다.

구성 요소 필드를 초기에 채우고 URL이 바뀔 때 변경하는 @Input를 제공해야 합니다

구성 요소 출력을 보낼 때 URL을 변경할 수 있는 @Output를 제공할 수 있습니다."양방향 데이터 바인딩의 이름 규약에 따라 필드 이름 뒤에""Change""를 추가해야 합니다."

"딥 링크"할 모든 필드의 이름을 포함하는 라우터 구성이 필요합니다.

아래 예제

참조

제공된 인터페이스DeepLinkingRoute를 사용하여 유형 보안 구성 가능

import {DeepLinkingRoute, DeepLinkingWrapperComponent} from '@jdrks/ngx-deep-linking';
...

const routes: DeepLinkingRoute[] = [
  {
    path: 'books/:selectedBookId',
    component: DeepLinkingWrapperComponent,
    wrappedComponent: BookListComponent,
    deepLinking: {
      params: [{name: 'selectedBookId', type: 'number'}],
      queryParams: [{name: 'searchString', type: 'string'}],
    }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BookListRoutingModule {
}

도서 목록 구성 요소는 다음과 같습니다.

@Component({
  templateUrl: 'book-list.component.html'
})
export class BookListComponent {

  private _selectedBookId: number = 0;

  @Output()
  private selectedBookIdChange: EventEmitter<number> = new EventEmitter<number>();

  @Input()
  get selectedBookId(): number {
    return this.selectedBookId;
  }

  set selectedBookId(value: number) {
    this.selectedBookId = value;
    this.selectedBookIdChange.next(bookId);
  }

  private _searchString = '';

  @Output()
  searchStringChange: EventEmitter<string> = new EventEmitter<string>();

  @Input()
  get searchString(): string {
    return this._searchString;
  }

  set searchString(value: string) {
    this._searchString = value;
    this.searchStringChange.next(value);
  }

  ...
}

그래서 기본적으로 양방향 데이터 귀속과 같다.setter를 사용할 때, 위의 구현은 @Output 필드에서 자동으로 발송되지만, 이것은 단지 편의를 위한 것입니다.

ngx 깊이 링크의 특징

간단한 루트 설정

을 통해 구성 요소 필드와 URL을 쉽게 동기화

유형 보안 구성

숫자, 문자열, 심지어 복잡한 형식의 필드를 json

으로 동기화하는 것을 지원합니다

각도 모듈 지원

지연 로드

해시 루트 정책 지원

도서관은 어떻게 운영합니까?

라이브러리는 구성 요소를 DeepLinkingWrapperComponent에 포장합니다.[딥 링크] 필드는 수동 양방향 데이터 바인딩을 통해 DeepLinkingWrapperComponent과 동기화됩니다.포장기는 URL과 포장 부품의 변경에 반응하고 반대로도 마찬가지다.

링크

Github:https://github.com/Nas3nmann/ngx-deep-linking
npm:https://www.npmjs.com/package/@jdrks/ngx-deep-linking