내 구성 요소에서 @Input ()으로 Observable을 얻습니다.
Observable 값이 변경되면 ng-bootstrap 아코디언을 확장 / 축소해야합니다. 따라서 템플릿에 Observable 값이 실제로 필요하지 않습니다.
이것은 이미 코드입니다.
구성 요소:
@Input() urlParam$!: Observable<string>;
@ViewChild('acc') accordion!: NgbAccordion;
urlParamChange$!: Observable<string>;
ngAfterViewInit(): void {
this.urlParamChange$ = this.urlParam$.pipe(
tap(urlParam => this.synchronizeAccordion(urlParam))
);
}
synchronizeAccordion(urlParam: string): void {
// do something with this.accordion
}
그리고 템플릿에서 비동기 파이프를 통해 새로 생성 된 urlParamChange $를 구독합니다.
<ng-container *ngIf="(urlParamChange$ | async)"></ng-container>
<ngb-accordion #acc="ngbAccordion">
....
</ngb-accordion>
urlParamChange $의 값이 실제로 필요하지 않기 때문에 자체 ng-container에 넣어 완전히 독립적이지만 그럼에도 불구하고 아코디언을 동기화하는 메서드가 호출됩니다.
위의 구현은 그다지 좋지 않다고 생각합니다. 작업을 두 개의 다른 파일로 분할합니다 (구성 요소의 탭이 필요하고 템플릿의 async-pipe가 추가로 필요함).
다음과 같은 방식으로 더 멋지지 않을까요? async-pipe의 도움으로 구독하는 대신 ngAfterViewInit ()에서 직접 subscribe ()합니다. 그런 식으로 추가 변수 urlParamChange $를 제거 할 수 있으며 구현은 모두 ngAfterViewInit () 메서드에 있습니다.
구성 요소:
@Input() urlParam$!: Observable<string>;
@ViewChild('acc') accordion!: NgbAccordion;
ngAfterViewInit(): void {
this.urlParam$.subscribe(urlParam => this.synchronizeAccordion(urlParam));
}
synchronizeAccordion(urlParam: string): void {
// do something with this.accordion
}
그리고 템플릿에서 추가 ng-container가 제거됩니다.
<ngb-accordion #acc="ngbAccordion">
....
</ngb-accordion>
제 생각에는 두 구현 모두 똑같은 방식으로 작동해야합니다. Best Practises에 따르면 첫 번째 솔루션이 선호되어야한다고 생각합니다. 그러나 두 번째는 더 깨끗한 IMO입니다.
그렇다면 그러한 사용 사례를 구현하는 가장 좋은 방법은 무엇입니까?
나는 접근 방식 2를 사용하는 것이 좋습니다. 자신의 입학을 통해 더 깨끗하고 따라 가기 쉽습니다.
누군가가 미래에 와서 바인딩은 있지만 내용이없는 무작위 ng-container를 본다고 상상해보십시오 async. 더 이상 사용되지 않는다는 가정하에 제거하기로 결정할 수 있습니다.이 경우 전체 tap작업이 더 이상 실행되지 않으며 이에 대해 경고하는 오류가 발생하지 않습니다.
접근 방식 2를 읽는 사람은 무슨 일이 일어나고 있는지 매우 쉽게 볼 수 있으며 구독 수정 결과는 분명합니다.
수동으로 구독을 취소하는 것은 문제가되지 않습니다. 확인 만하면됩니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다