Kątowy 2 - routing podmodułu i zagnieżdżony <router-outlet>


83

Szukam rozwiązania z Angular 2 dla scenariusza wyjaśnionego poniżej:

wprowadź opis obrazu tutaj

W tym scenariuszu nawigacja górna zawiera łącza do ładowania modułów podrzędnych, a nawigacja podrzędna - łącza do aktualizowania zawartości modułu podrzędnego.

Adresy URL powinny być mapowane jako:

  • / home => ładuje stronę główną w gniazdku routera głównego komponentu
  • / submodule => ładuje moduł podrzędny do gniazda routera głównego komponentu i domyślnie powinien pokazywać stronę domową modułu podrzędnego i podrzędny pasek nawigacyjny
  • / submodule / feature => ładuje funkcję wewnątrz gniazda routera submodułu

Moduł aplikacji (i komponent aplikacji) zawiera górny pasek nawigacyjny do przechodzenia do różnych modułów podrzędnych, a szablon komponentu aplikacji mógłby wyglądać następująco

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Ale tutaj jest złożoność. Potrzebuję, aby moje moduły podrzędne miały podobny układ z paskiem nawigacyjnym drugiego poziomu i własnym gniazdem routera do ładowania własnych komponentów.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

Wypróbowałem każdą opcję i szukałem wszędzie, ale nie mogłem znaleźć rozwiązania, aby mieć domyślny szablon (taki jak komponent aplikacji) w module podrzędnym z gniazdem routera, a także załadować zawartość modułu podrzędnego do wewnętrznego gniazda routera bez utraty nawigacji podrzędnej .

Byłbym wdzięczny za wszelkie uwagi lub pomysły


Więc co dokładnie dzieje się z obecną konfiguracją?
micronyks

1
przy obecnej konfiguracji nie mogę używać wewnętrznego gniazda routera. Routing ładuje nawet komponenty podmodułu w głównym gniazdku routera, a wszystkie szablony komponentów podmodułu muszą mieć dołączoną nawigację podrzędną
Ron F

1
czy znalazłeś rozwiązanie dla zagnieżdżonego gniazda routera bez utraty nawigacji podrzędnej? Wpadłem w podobny problem.
Saurav

2
Tak, myślę, że natknąłem się na to samo, <sub-navbar> po prostu się nie wyświetla, tylko to, co wychodzi z routera.
louisvno

Sprawdź tutaj kątowe 8 wielopoziomowe RouterOutlet i RouterModules przykład freakyjolly.com/...
Code Spy

Odpowiedzi:


54

Strona html będzie wyglądać następująco.

Strona główna

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Strona modułu podrzędnego

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

po kliknięciu nawigacji w górnym pasku nawigacyjnym, główna trasa wylotowa zostanie odpowiednio poprowadzona.

Klikając na podrzędnym pasku nawigacyjnym, wyjście routera [sub] będzie odpowiednio kierować.

HTML jest w porządku, sztuczka pojawi się podczas pisania app.routing

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

Mam nadzieję, że to ci pomoże.

Więcej szczegółów https://angular.io/guide/router


1
Twój html str był poprawny, główna gra to app.routing.ts. Zrobiłem podobne aplikacje dwa razy.
Aswin KV

1
Dziękuję za odpowiedź. Próbowałem podobnego routingu, ale moje zamieszanie polega na tym, gdzie powinno iść to gniazdo routera podmodułu? w głównym module jest jasne, że gniazdo routera powinno znajdować się w szablonie app.component, ale nie mamy takiej samej koncepcji komponentu aplikacji dla podmodułów. więc gdzie idzie wyjście routera „sub”?
Ron F

Jak powinno wyglądać łącze routera w podrzędnym pasku nawigacyjnym?
Ron F

3
Łącze routera musi być ciągiem znaków, jeśli dodasz znak „/” na początku ciągu, zastąpi on bieżącą trasę, jeśli nie dodasz znaku „/”, łącze trasy doda do bieżącej trasy. Wciąż nie jesteście pewni, proszę, utwórz przykładową aplikację na jakiejś internetowej platformie kodowania i udostępnij link
Aswin KV

2
Nie jestem tego całkowicie pewien, ale zagnieżdżonej router-outletdyrektywy nie trzeba nazywać. Oto przykład: github.com/gothinkster/angular-realworld-example-app/blob/ ...
Jess

21

Posługiwać się:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Pełny przykład:

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

1
Od której wersji ta ścieżka nazw jest obsługiwana. Bcoz próbuję w wersji 6 i nie działa.
Sujay UN

1
Nie działa to w obecnej wersji kątowej.
After_Sunset

0

musisz wspomnieć nazwę gniazdka w trasach, wspomnieć nazwę gniazda routera w routingu, na przykład „outlet: 'sub”

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];

ten fragment kodu zwraca błąd: „Uncaught ReferenceError: LoginComponent is not defined”
Umpa
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.