Winkel 2, RC5-router-Steckdose in einem anderen-Routers-Steckdose

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

Wird es arbeiten wie diese:

In der ersten router-Steckdose wird es in zwei Ansichten:

  • auth-Komponente (/login)
  • admin-Komponente (/admin)

Dann in die zweite Steckdose wird in der admin-Komponente, mit Ihren eigenen Strecken, das wird machen diese:

  • dashboard (/admin)
  • Profil (/admin/profile)
  • Benutzer (/admin/Benutzer)

Nun, in den Winkel-2 docs, die ich sehen kann, haben Sie diese Implementierung mit Hilfe von Modulen. Aber ich will nicht für die Verwendung von mehreren Modulen (oder ich?).

Gibt es eine Möglichkeit, um diese Umsetzung ohne Abtrennung Module?

Ich möchte eine Standard-Komponente für den admin-Bereich, deswegen wollte ich den zweiten router-outlet, zum Beispiel: Die Dashboards haben die HeaderComponent, LeftNavComponent, und die DashboardCompoent. Aber die Profil-Seite haben all diese HeaderComponent und LeftNavComponent zu, und das einzige, was ändern würde, ist die ProfileComponent, so dass es im Grunde die gleiche Struktur. Ich denke, ich brauche nicht zu wiederholen, alle zu importieren für jedes andere admin-Seite. Ich wollte nur eine Haupt-admin-Komponente, die einen dynamischen Inhalt, basierend auf der aktuellen route.

Ich schon versucht und im internet gesucht, eine Menge, aber das einzige Beispiel, das ich finden konnte, ist von der offiziellen Eckig 2-Dokumentation. Aber Sie setzen diese mit mehreren Modulen.

Module sind erforderlich für lazy loading und, soweit ich weiß, werden zwingend nach dem nächsten update, weil Component.pipes und Component.directives veraltet sind.
Gut zu wissen! Gestern habe ich mich gefragt, warum Sie nicht die ".Richtlinien" - Attribut in Ihrer (Eckigen 2-Dokumentation) Beispiele. So, jetzt wird alles importiert werden von den Modulen, und nicht von der Komponente? Wenn das der Fall ist, ein Grund mehr, die Arbeit mit den Modulen jetzt! Hahahah.

InformationsquelleAutor Thiago Yoithi | 2016-08-24

  1. 24

    Obwohl die Module werden empfohlen, sind Sie optional für jede route.

    Können Sie konfigurieren routing wie unten, ohne irgendwelche Module.

    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!!

    Danke für die Antwort! Direkt nach der Buchung dieser Frage, ich habe gelesen das eckige 2-Dokumentation wieder und jetzt verstehe ich, wie die Arbeit mit all jenen Modulen, Routen und Kind Routen, ich denke, ich werde diesen Weg gehen. Dein Beispiel Ergebnis ist ein wenig anders als der, den ich erwartete, wollte ich zwei router-Ausgang, eine Umschaltung zwischen /login und /admin, und die anderen Steckdose gehen würde innen /admin zu navigieren zwischen diesen Sachen zu /admin-Pfad. Aber danke für dein Beispiel, ich kann jetzt verstehen, wie ich könnte ihn ändern, damit alles so funktioniert wie ich mir gewünscht vor. Also danke nochmal für deine Hilfe!
    Gut zu wissen, dass es geholfen hat... Prost!
    jedes Beispiel, nutzen verzögertes laden von Modulen.
    sorry, Nein, habe nicht versucht, mich noch.

    InformationsquelleAutor Madhu Ranjan

Schreibe einen Kommentar