honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(router): fix code-example headers (#42507) 

Previously, the code-examples headers used in the
"Creating custom route matches" tutorial contained the name of the
example directory (`routing-with-urlmatcher`). This was confusing,
because the user was previously instructed to create an app named
`angular-custom-route-match` and switch to that directory.

This commit fixes it by removing the root directory name from the
headers, thus leaving the path of the file relative to the current
working directory. This also aligns with code-examples in other guides.

PR Close #42507
This commit is contained in:
George Kalpakas 2021-06-07 20:44:08 +03:00 committed by Jessica Janiuk
parent 38c592ea0a
commit f85a120b7b
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
aio/content/guide/routing-with-urlmatcher.md
View File

@ -48,12 +48,12 @@ Using the Angular CLI, create a new application, _angular-custom-route-match_. I
1. In your code editor, locate the file, `profile.component.html` and replace
the placeholder content with the following HTML.
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.html" header="routing-with-urlmatcher/src/app/profile/profile.component.html"></code-example>
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.html" header="src/app/profile/profile.component.html"></code-example>
1. In your code editor, locate the file, `app.component.html` and replace
the placeholder content with the following HTML.
<code-example path="routing-with-urlmatcher/src/app/app.component.html" header="routing-with-urlmatcher/src/app/app.component.html"></code-example>
<code-example path="routing-with-urlmatcher/src/app/app.component.html" header="src/app/app.component.html"></code-example>
## Configure your routes for your application
@ -63,21 +63,21 @@ With your application framework in place, you next need to add routing capabilit
1. Add an `import` statement for Angular's `RouterModule` and `UrlMatcher`.
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="import"></code-example>
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="import"></code-example>
1. In the imports array, add a `RouterModule.forRoot([])` statement.
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="imports-array"></code-example>
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="imports-array"></code-example>
1. Define the custom route matcher by adding the following code to the `RouterModule.forRoot()` statement.
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="matcher"></code-example>
<code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="matcher"></code-example>
This custom matcher is a function that performs the following tasks:
* The matcher verifies that the array contains only one segment.
* The matcher employs a regular expression to ensure that the format of the username is a match.
* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path.
* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path.
* If there isn't a match, the function returns null and the router continues to look for other routes that match the URL.
<div class="is-helpful">
@ -94,19 +94,19 @@ With the custom matcher in place, you now need to subscribe to the route paramet
1. Add an `import` statement for Angular's `ActivatedRoute` and `ParamMap`.
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="activated-route-and-parammap"></code-example>
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="activated-route-and-parammap"></code-example>
1. Add an `import` statement for RxJS `map`.
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="rxjs-map"></code-example>
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="rxjs-map"></code-example>
1. Subscribe to the `username` route parameter.
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="subscribe"></code-example>
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="subscribe"></code-example>
1. Inject the `ActivatedRoute` into the component's constructor.
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="activatedroute"></code-example>
<code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="activatedroute"></code-example>
## Test your custom URL matcher