Angular 2, RC5-Router-Steckdose in einem anderen Router-Ausgang

Question

Ich versuche, ein Projekt mit einer Router-Steckdose in einem anderen Router-Ausgang zu machen:

Es wird wie folgt arbeiten:

In der erste Router-Ausgang wird es zwei Ansichten haben:

• auth Komponente (/ login)

• Admin-Komponente (/ admin)

dann in der zweiten Auslass wird im Innern der Admin-Komponente, mit seiner eigenen Route sein, dass diese machen wird:

• Armaturenbretts (/ admin)

• Profil (/ admin/Profil)

• Benutzer (/ admin/users)

Jetzt, in den Angular 2 Dokumenten, kann ich sehen, dass sie diese Implementierung mit Modulen haben. Aber ich möchte nicht mehrere Module verwenden (oder muss ich?).

Gibt es eine Möglichkeit, diese Implementierung durchzuführen, ohne Module zu trennen?

Ich möchte eine Standardkomponente für den Admin-Bereich, deshalb wollte ich die zweite Router-Outlet, zum Beispiel: Das Dashboard wird die HeaderComponent, LeftNavComponent und DashboardCompoent haben. Aber die Profilseite wird auch all diese HeaderComponent und LeftNavComponent haben, und die einzige Sache, die sich ändern würde, ist die ProfileComponent, also wird es im Grunde die gleiche Struktur haben. Ich denke, ich muss nicht jeden Import für jede Adminseite wiederholen. Ich wollte nur eine Hauptadministrationskomponente haben, die basierend auf der aktuellen Route einen dynamischen Inhalt hat.

Ich habe schon viel im Internet versucht und gesucht, aber das einzige Beispiel, das ich finden konnte, stammt aus der offiziellen Angular 2-Dokumentation. Aber sie implementieren dies mit mehreren Modulen.

Answer 1

Obwohl Module empfohlen werden, sind sie optional für jede Routennavigation.

Sie können das Routing wie unten ohne Module konfigurieren.

app.routing

import { Routes, RouterModule } from '@angular/router'; 

     import { DashboardComponent, 
     AdminComponent, 
     ProfileComponent, 
     UsersComponent 
     } from './app.component'; 

     const appRoutes: Routes = [ 
     { 
     path: '', 
     redirectTo: '/dashboard/admin/users', 
     pathMatch: 'full' 
     }, 
     { 
     path: 'dashboard', 
     component: DashboardComponent, 
     children:[ 
     { 
     path : 'admin', 
     component: AdminComponent, 
     children:[ 
      { 
      path : 'users', 
      component: UsersComponent 
      }, 
      { 
      path : 'profile', 
      component: ProfileComponent 
      } 
     ] 
     } 
     ] 
    } 
    ]; 

    export const routing = RouterModule.forRoot(appRoutes); 

Komponenten

import { Component }   from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h3 class="title">Routing Deep dive</h3> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
} 


@Component({ 
    template: ` 
    <h3 class="title">Dashboard</h3> 
    <nav> 
    </nav> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class DashboardComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Admin</h3> 
    <nav> 
     <a routerLink="users" routerLinkActive="active" >Users</a> 
     <a routerLink="profile" routerLinkActive="active" >Profile</a> 
    </nav> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AdminComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Profile</h3> 
    ` 
}) 
export class ProfileComponent { 
} 

@Component({ 
    template: ` 
    <h3 class="title">Users</h3> 
    <hr /> 
    ` 
}) 
export class UsersComponent { 
} 

Hier ist die Plunker !!

Hoffe das hilft !!