angular logoAngular Docs
آنلاین

ساخت route matchهای سفارشی

Angular Router از یک matching strategy قدرتمند پشتیبانی می‌کند که می‌توانید از آن برای کمک به navigation کاربران در application خود استفاده کنید. این matching strategy از routeهای static، routeهای متغیر با parameter، wildcard routeها و موارد مشابه پشتیبانی می‌کند. همچنین برای موقعیت‌هایی که URLها پیچیده‌تر هستند، می‌توانید pattern matching سفارشی خودتان را بسازید.

در این tutorial، با استفاده از UrlMatcher مربوط به Angular یک route matcher سفارشی می‌سازید. این matcher در URL به‌دنبال یک Twitter handle می‌گردد.

هدف‌ها

UrlMatcher مربوط به Angular را پیاده‌سازی کنید تا یک route matcher سفارشی بسازید.

ساخت یک application نمونه

با استفاده از Angular CLI، یک application جدید به نام angular-custom-route-match بسازید. علاوه بر framework پیش‌فرض application Angular، یک component به نام profile هم می‌سازید.

  1. یک پروژه Angular جدید با نام angular-custom-route-match بسازید.

``shell ng new angular-custom-route-match ``

وقتی با پرسش Would you like to add Angular routing? روبه‌رو شدید، Y را انتخاب کنید.

وقتی با پرسش Which stylesheet format would you like to use? روبه‌رو شدید، CSS را انتخاب کنید.

بعد از چند لحظه، پروژه جدید angular-custom-route-match آماده است.

  1. از terminal، به directory مربوط به angular-custom-route-match بروید.
  2. یک component به نام profile بسازید.

``shell ng generate component profile ``

  1. در code editor، فایل profile.html را پیدا کنید و محتوای placeholder را با HTML زیر جایگزین کنید.
profile.html
<p>Hello {{ username() }}!</p>
  1. در code editor، فایل app.html را پیدا کنید و محتوای placeholder را با HTML زیر جایگزین کنید.
app.html
<h2>Routing with Custom Matching</h2>

Navigate to <a routerLink="/@Angular">my profile</a>

<router-outlet />

Configure کردن routeهای application

بعد از آماده شدن framework application، مرحله بعد این است که قابلیت‌های routing را به فایل app.config.ts اضافه کنید. به‌عنوان بخشی از این فرایند، یک URL matcher سفارشی می‌سازید که در URL به‌دنبال Twitter handle می‌گردد. این handle با یک علامت @ در ابتدا تشخیص داده می‌شود.

  1. در code editor، فایل app.config.ts خود را باز کنید.
  2. یک statement از نوع import برای provideRouter و withComponentInputBinding از Angular، و همچنین routeهای application اضافه کنید.

```ts import {provideRouter, withComponentInputBinding} from '@angular/router';

import {routes} from './app.routes'; ```

  1. در array مربوط به providers، یک statement از نوع provideRouter(routes, withComponentInputBinding()) اضافه کنید.
  1. با اضافه کردن کد زیر به routeهای application، route matcher سفارشی را تعریف کنید.
app.routes.ts
import {Routes, UrlSegment} from '@angular/router';

import {Profile} from './profile/profile';

export const routes: Routes = [
  // #docregion matcher
  {
    matcher: (url) => {
      if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
        return {consumed: url, posParams: {username: new UrlSegment(url[0].path.slice(1), {})}};
      }

      return null;
    },
    component: Profile,
  },
  // #enddocregion matcher
];

این matcher سفارشی functionای است که کارهای زیر را انجام می‌دهد:

  • Matcher بررسی می‌کند که array فقط یک segment داشته باشد
  • Matcher از یک regular expression استفاده می‌کند تا مطمئن شود format مربوط به username match است
  • اگر match وجود داشته باشد، function کل URL را برمی‌گرداند و یک route parameter به نام username را به‌عنوان substringای از path تعریف می‌کند
  • اگر match وجود نداشته باشد، function مقدار null برمی‌گرداند و router به جست‌وجو برای routeهای دیگری که با URL match می‌شوند ادامه می‌دهد

خواندن route parameterها

بعد از آماده شدن matcher سفارشی، اکنون می‌توانید route parameter را در component مربوط به profile bind کنید.

در code editor، فایل profile.ts را باز کنید و یک input مطابق با parameter مربوط به username بسازید. پیش‌تر feature مربوط به withComponentInputBinding را در provideRouter اضافه کردیم. این کار به Router اجازه می‌دهد اطلاعات را مستقیما به route componentها bind کند.

ts
username = input.required<string>();

تست URL matcher سفارشی

بعد از آماده شدن کد، اکنون می‌توانید URL matcher سفارشی خود را تست کنید.

  1. از یک terminal window، دستور ng serve را اجرا کنید.

``shell ng serve ``

  1. مرورگر را روی http://localhost:4200 باز کنید.

باید یک web page ساده ببینید که شامل جمله Navigate to my profile است.

  1. روی hyperlink مربوط به my profile کلیک کنید.

جمله جدید Hello, Angular! روی صفحه ظاهر می‌شود.

قدم بعدی

Pattern matching با Angular Router وقتی URLهای dynamic در application دارید، انعطاف زیادی به شما می‌دهد. برای یادگیری بیشتر درباره Angular Router، موضوع‌های زیر را ببینید: