{"componentChunkName":"component---src-templates-blog-post-js","path":"/Angular/How_to_handle_query_parameters_in_a_router_link/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"fdc19ebc-8cce-5852-bcdb-a5c1a51a52f8","excerpt":"How to handle query parameters in a router link. One of:  : Merge new with current parameters.(현재 URL에 포함된 파라미터를 함께 전달)  : Preserve current parameters.(현재 파라미터만 전달) : 기본형. 일반적인 방법으로 파라미터를 사용 use case ⇒ result 참고: Angular.io","html":"<p>How to handle query parameters in a router link. One of:</p>\n<ul>\n<li><code class=\"language-text\">merge</code> : Merge new with current parameters.(현재 URL에 포함된 파라미터를 함께 전달)</li>\n<li><code class=\"language-text\">preserve</code> : Preserve current parameters.(현재 파라미터만 전달)</li>\n<li><code class=\"language-text\">default</code>: 기본형. 일반적인 방법으로 파라미터를 사용</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token keyword\">type</span> <span class=\"token class-name\">QueryParamsHandling</span> <span class=\"token operator\">=</span> <span class=\"token string\">'merge'</span> <span class=\"token operator\">|</span> <span class=\"token string\">'preserve'</span> <span class=\"token operator\">|</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>use case</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token function\">goUsers</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>router<span class=\"token punctuation\">.</span><span class=\"token function\">navigate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'/users'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> queryParams<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>filter<span class=\"token operator\">:</span> <span class=\"token string\">'new'</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> queryParamsHandling<span class=\"token operator\">:</span> <span class=\"token string\">'merge'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⇒ result</p>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token operator\">&lt;</span>http<span class=\"token operator\">:</span><span class=\"token operator\">/</span><span class=\"token operator\">/</span>localhost<span class=\"token operator\">:</span><span class=\"token number\">4200</span><span class=\"token operator\">/</span>users<span class=\"token operator\">?</span>order<span class=\"token operator\">=</span>popular<span class=\"token operator\">&amp;</span>filter<span class=\"token operator\">=</span><span class=\"token keyword\">new</span><span class=\"token operator\">></span></code></pre></div>\n<blockquote>\n<p>참고:</p>\n</blockquote>\n<ul>\n<li><a href=\"https://angular.io/api/router/QueryParamsHandling\">Angular.io</a></li>\n</ul>","frontmatter":{"title":"How to handle query parameters in a router link","date":"May 08, 2020"}}},"pageContext":{"slug":"/Angular/How_to_handle_query_parameters_in_a_router_link/","previous":{"fields":{"slug":"/Today I Learned/We_detected_that_the_Chromium_Renderer_process_just_crashed_GITLAB_CICD_에러_해결하기/"},"frontmatter":{"title":"We detected that the Chromium Renderer process just crashed GITLAB CI/CD 에러 해결하기","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/hover에_따라_주고싶은_element_스타일링하기/"},"frontmatter":{"title":"hover에 따라 주고싶은 element 스타일링하기","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}