angular - Angular2'de Dinamik Yönlendirme Uygulama (Typescript)

Routing özellikleri ile bir bileşeni süslemek (@RouteConfig) için kullanılabilecek RouteConfig sınıfı, o bileşen için belirli rota tanımları içerir. Şimdi, önemli olan bu rota tanımlarının çalışma zamanında (dinamik olarak) enjekte edilmesidir.

Sebebi şu ki, diyelim ki bir uygulamam var ve bu uygulamada 'n' sayıda rotayı görüntülemem (UI) ve tanımlamam (süslemem) gerekiyor; her biri, uygulamanın yüklendiği hesaba ve dolayısıyla o belirli hesapla ilişkili haklara karşılık geliyor. Bu nedenle, bir bileşen için dekoratör @RouteConfig içinde rota tanımlarının önceden tanımlanmış olması, hiç mantıklı değil.

Benim yaklaşımım, her yeni hesap yüklendiğinde bir servis çağrısı yapmak. Ve yalnızca ilişkili yolları almak ve bunları çalışma zamanında enjekte etmek, böylece o hesap için kullanıcı arayüzünde görüntülenen her bir rota ile ilişkili diğer bileşenlere yönlendirme yapmak.

import { Summary } from './components/summary';

@RouteConfig([
  /*
    Let's say we need a seller dashboard to be displayed...
  */
  //{ path: 'SellerDashboard', component: SellerDashboard }
  { path: '/', component: Summary }
])
class App {
    contactInfo: ContactInfoModel;
    public App(dataService: DataService) {
        this.model = dataService.getContactInfo();
    }
}

Yukarıdaki kod parçacığında, diyelim ki uygulamama giriş yapmış bir satıcı hesabına karşılık gelen satıcı kontrol panelini yüklemek istiyorum. Şimdi, satış noktası kontrol panelini veya bir satıcıyla ilgisi olmayan herhangi bir şeyi göstermek anlamlı olmayacaktır (Bizim durumumuzda, satıcının envanter kontrol paneli bir satıcı için uygundur).

Özetle, tüm rotaları aynı yerde yapılandırmak yerine yalnızca gereken rotaları enjekte etmek.

DÜZENLEME 1:

Bu sorunun, bu gönderide işaretlenen tekrar sorusuna (sonrasında sorulmuş olan) göre daha basit bir kullanım durumu veya senaryosu vardır. Bu gönderide belirtilen yanıtlar daha basit yaklaşımlara sahiptir ve çok daha sezgiseldir.

Cevap #1

Bu gönderiyi kontrol et:

http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

Temelde yazar, @RouteConfig dekoratörüne dinamik olarak rotalar eklemek için Reflect API'sini kullanan DynamicRouteConfigurator adında bir sınıf oluşturur.

Github bağlantısı:

https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts

İlgili makaleler