개발/Angular (5) 썸네일형 리스트형 [Angular] @ViewChild를 활용한 스크롤 이벤트 처리 div의 스크롤이 바닥까지 갔는지 체크하고 동적으로 class 변경하는 처리@ViewChild 활용스크롤 영역에 템플릿 참조 변수 추가// html // 내용 생략 블라블라 @ViewChild를 사용하여 요소에 접근// tsimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';@Component({ selector: 'app-test-scroll', templateUrl: './test-scroll.component.html',})export class TestScrollComponent implements AfterViewInit { @ViewChild('scrollAreaWrapper', { static: .. [Angular] 페이지 로드 anchor scroll 처리 url#scrollPoint 로 이동했을때 페이지 로드 시 scrollPoint영역으로 스크롤되도록 만들고 싶었다 *ngIf가 많은 페이지라 페이지 로드 후 스크롤을 이동시켜야 하는데 시점을 잡기가 어려웠다. // test.component.html angular lifecycle hook 중 ngAfterViewInit를 사용했다. 그럼에도 dom에 그려지는 시간이 좀 걸리는 지 스크롤이 제대로 이동하지않아 setTimeout을 걸었다. 돌아가긴하지만 아쉬운 코드. // test.component.ts // ngAfterViewInit 사용 ngAfterViewInit() { this.route.fragment.subscribe((fragment: string) => { if (fragment) { s.. [Angular] 같은 컴포넌트를 사용하는 페이지 이동 시 화면 리로드 처리 ( 슬릭 데이터 리로드) 동일 컴포넌트로 이동하며 데이터만 바뀌는 케이스에서 슬릭 데이터가 빈 값으로 변해버리는 문제가 발생했다. 최악의 경우 refreshComponent를 만들고 변수를 받아 다시 페이지를 이동시키는 방법을 사용하고자 했는데 다행히 간단하게 해결됐다. 1. 라이프사이클로 init 처리 (실패) change에서 data 변화를 감지하여 init 시키려 했지만 같은 오류가 발생함. 2. 라우터 처리 (성공) 동일한 페이지로 이동시킬 때 라우팅 처리를 다르게 함 this.router.navigateByUrl('/').then(() => { this.router.navigate([url]); }); 경로를 '/'로 이동시킨 후 url로 이동시킨다. 화면에서 실행했을 때는 한번의 이동처럼 자연스럽게 이동된다. [Angular] navigateByUrl, URL인코딩 없이 페이지 이동시키기 navigate 방식으로 URL 처리를 하고 있었는데 이동한 페이지에서 URL 인코딩 처리가 되는 문제가 발생 const navigationExtras: NavigationExtras = { queryParamsHandling: 'preserve', preserveFragment: true, }; this.router.navigate([redirectUrl], navigationExtras); // 소스 출처: https://angular.kr/guide/router-tutorial-toh navigateByUrl 을 사용해 페이지 이동처리를 하니 URL인코딩 없이 잘 넘어감 this.router.navigateByUrl(url).catch(console.error); navigateByUrl() 메서드.. [개선] Angular 검색 기록 남겨 이전 페이지로 이동 (history back) 문제점 단순한 검색 처리 검색 (API 호출) 결과처리 (목록 생성) 개선 방법 URL query parameter 추가 추가한 부분 import import { ActivatedRoute } from '@angular/router'; 검색 API로 넘기던 데이터를 쿼리 파라미터로 만들어 router 이동 처리 this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: urlParams, queryParamsHandling: 'merge', }); query parameter 갱신을 확인해 해당 데이터로 API this.activatedRoute.queryParams.subscribe(m => { // Query Parameter가.. 이전 1 다음