Özel Route Eşleştiricileri Oluşturma

Angular Router, kullanıcılarınızın uygulamanızda gezinmesine yardımcı olmak için kullanabileceğiniz güçlü bir eşleştirme stratejisini destekler. Bu eşleştirme stratejisi statik rotaları, parametreli değişken rotaları, joker rotaları ve daha fazlasını destekler. Ayrıca, URL'lerin daha karmaşık olduğu durumlar için kendi özel kalıp eşleştirmenizi oluşturun.

Bu eğitimde, Angular'ın UrlMatcher'ını kullanarak özel bir rota eşleştirici oluşturacaksınız. Bu eşleştirici, URL'de bir Twitter kullanıcı adı arar.

Hedefler

Angular'ın UrlMatcher'ını kullanarak özel bir rota eşleştirici uygulayın.

Örnek bir uygulama oluşturma

Angular CLI kullanarak, angular-custom-route-match adlı yeni bir uygulama oluşturun. Varsayılan Angular uygulama çerçevesine ek olarak, bir profile bileşeni de oluşturacaksınız.

1. angular-custom-route-match adlı yeni bir Angular projesi oluşturun.

   ng new angular-custom-route-match

   Would you like to add Angular routing? sorusu geldiğinde Y seçin.

   Which stylesheet format would you like to use? sorusu geldiğinde CSS seçin.

   Birkaç dakika sonra yeni proje angular-custom-route-match hazırdır.

2. Terminalinizden angular-custom-route-match dizinine gidin.

3. Bir profile bileşeni oluşturun.

   ng generate component profile

4. Kod editörünüzde profile.html dosyasını bulun ve yer tutucu içeriği aşağıdaki HTML ile değiştirin.

   profile.html

   <p>Hello {{ username() }}!</p>
   

5. Kod editörünüzde app.html dosyasını bulun ve yer tutucu içeriği aşağıdaki HTML ile değiştirin.

   app.html

   <h2>Routing with Custom Matching</h2>
   
   Navigate to <a routerLink="/@Angular">my profile</a>
   
   <router-outlet />
   

Uygulamanız için route'ları yapılandırma

Uygulama çerçeveniz hazır olduğunda, app.config.ts dosyanıza yönlendirme yetenekleri eklemeniz gerekir. Bu işlemin bir parçası olarak, URL'de bir Twitter kullanıcı adı arayan özel bir URL eşleştirici oluşturacaksınız. Bu kullanıcı adı, öncesinde gelen @ sembolü ile tanımlanır.

1. Kod editörünüzde app.config.ts dosyanızı açın.

2. Angular'ın provideRouter ve withComponentInputBinding ile uygulama rotaları için bir import ifadesi ekleyin.

   import {provideRouter, withComponentInputBinding} from '@angular/router';
   
   import {routes} from './app.routes';

3. providers dizisinde bir provideRouter(routes, withComponentInputBinding()) ifadesi ekleyin.

4. Aşağıdaki kodu uygulama rotalarına ekleyerek özel rota eşleştiriciyi tanımlayın.

   app.routes.ts

   {
       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,
     },

Bu özel eşleştirici, aşağıdaki görevleri yerine getiren bir fonksiyondur:

• Eşleştirici, dizinin yalnızca bir segment içerdiğini doğrular
• Eşleştirici, kullanıcı adı formatının eşleştiğinden emin olmak için bir düzenli ifade kullanır
• Eşleşme varsa, fonksiyon tüm URL'yi döndürür ve yolun bir alt dizesi olarak bir username rota parametresi tanımlar
• Eşleşme yoksa, fonksiyon null döndürür ve yönlendirici URL ile eşleşen diğer rotaları aramaya devam eder

Route parametrelerini okuma

Özel eşleştirici hazır olduğunda, artık profile bileşeninde rota parametresini bağlayabilirsiniz.

Kod editörünüzde profile.ts dosyanızı açın ve username parametresiyle eşleşen bir input oluşturun. Daha önce provideRouter'da withComponentInputBinding özelliğini eklemiştik. Bu, Router'ın bilgileri doğrudan rota bileşenlerine bağlamasına olanak tanır.

username = input.required<string>();

Özel URL eşleştiricinizi test etme

Kodunuz hazır olduğunda, artık özel URL eşleştiricinizi test edebilirsiniz.

1. Bir terminal penceresinden ng serve komutunu çalıştırın.

   ng serve

2. Bir tarayıcıda http://localhost:4200 adresini açın.

   Navigate to my profile yazan bir cümleden oluşan tek bir web sayfası görmelisiniz.

3. my profile bağlantısına tıklayın.

   Sayfada Hello, Angular! yazan yeni bir cümle belirir.

Sonraki Adımlar

Angular Router ile kalıp eşleştirme, uygulamanızda dinamik URL'leriniz olduğunda size çok fazla esneklik sağlar. Angular Router hakkında daha fazla bilgi edinmek için aşağıdaki konulara bakın: