๋ฐ˜์‘ํ˜•

Angular study 1
[Angular] SVG path element click ์ด๋ฒคํŠธ ํ•จ์ˆ˜ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์•ต๊ทค๋Ÿฌ์—์„œ SVG path element์— click ์ด๋ฒคํŠธ ํ•จ์ˆ˜ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. My Case ์ œ ์ผ€์ด์Šค์˜ ๊ฒฝ์šฐ ํŠน์ • SVG ์š”์†Œ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. svg ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ts ํŒŒ์ผ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. @ViewChild('myPath') myPath: ElementRef; handleClick() { console.log("handleClick!!"); } ํ•˜์ง€๋งŒ, svg ํŒŒ์ผ์˜ path ์š”์†Œ๋ฅผ ํด๋ฆญํ•ด๋„ handleClick ํ•จ์ˆ˜๊ฐ€ ๋™์ž‘ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. Why? ํด๋ฆญ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๋Š” ์กฐ๊ฑด์ด ์ถฉ์กฑํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ•ด๋‹น ์š”์†Œ..
Framework/Angular 2023.04.10
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”