it-swarm.com.de

Untergeordnete Routen des Submoduls funktionieren nicht ("Fehler: Routen können nicht zugeordnet werden.")

Ich verwende Angular 6.0.3. Ich habe ein Submodul namens "Admin" mit drei Komponenten. Die root-Komponente ("AdminComponent") von Admin funktioniert gut (path: ""), aber ich kann keine der anderen auslösen. Warum kann Angular meine Routen nicht finden?

routen.ts

import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";

import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";

export const appRoutes: Routes = [
  {
    path: "",
    children: [
      { path: "", component: SplashComponent, pathMatch: "full" },
      { path: "login", component: LoginComponent, pathMatch: "full" },
      { path: "watch", component: WatchComponent, pathMatch: "full" },
      {
        path: "admin",
        component: AdminComponent,
        pathMatch: "full",
        canActivate: [AdminGuard],
        children: [
          {
            path: "",
            component: AdminHomeComponent,
            pathMatch: "full",
            outlet: "admin"
          },
          {
            path: "add-song",
            component: AddSongComponent,
            pathMatch: "full",
            outlet: "admin"
          }
        ]
      }
    ]
  }
];

admin/admin/admin.component.html

<router-outlet name='admin'></router-outlet>

admin/home/home.component.html

<div>

   <a mat-raised-button [routerLink]="['add-song']">Add new song</a>

</div>

hinweis: Ich habe auch [routerLink]="[{ outlets: { admin: ['add-song'] } }] ausprobiert, die Route wurde immer noch nicht gefunden.

4
zakdances

Ich würde Ihnen empfehlen, sich die Lazy-loading - Funktion anzusehen, während Sie Submodule laden. Dies ist der richtige Weg, um zu laden, wenn Sie viele Module haben.

In Ihrem Fall haben Sie Admin-Modul als Untermodul, also hier die Routing-Konfiguration,

 RouterModule.forRoot([
      { path: '', redirectTo: 'splash', pathMatch: 'full' },
      { path: 'splash', component: SplashComponent },
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
      { path: '**', component: NotFoundComponent }
    ], { enableTracing: true })]

und das Admin.module-Routing ist wie folgt:

RouterModule.forChild([
      {
        path: '', component: AdminComponent,
        children: [

          { path: '', component: AdminHomeComponent }
          ,
          { path: 'add-song', component:  AddSongComponent}]
      }
  ])
  ]

STACKBLITZ DEMO ARBEITEN

ROUTEN: 

Splash

Administrator

Admin-AddSong

10
Sajeetharan

Dies kann eine späte Antwort sein, aber ich möchte mich auf eine wichtige Sache konzentrieren. Der Winkelcompiler ist sehr intelligent und erkennt, auf welchem ​​Stamm Sie sich gerade befinden. Wenn Sie also eine verschachtelte Route von der HTML-Vorlage aus aufrufen, wird Ihre aktuelle Route automatisch geprüft In der URL und in welcher Route auch immer Sie möchten, wird dies einfach an die aktuelle Route angehängt.

Einfach ausgedrückt: Was Sie in Ihrem Code aus admin/home/home.component.html zu tun versuchen, Sie versuchen add-song route auszulösen, und Sie erhalten ein Ergebnis, da admin/add-song nicht vorhanden ist. Dies wird jedoch ziemlich erwartet

routen teilen Konfig. für Kinder und einige andere Code-Schnipsel.

children: [
      {
        path: "admin-home",
        component: AdminHomeComponent,
        pathMatch: "full",
        outlet: "admin"
      },
      {
        path: "add-song", 
        component: AddSongComponent, 
        pathMatch: "full",
        outlet: "admin"
      },
      {path: '', 
      redirectTo:'admin-home', 
      pathMatch: 'full'}
    ]

jetzt von deinem admin/home/home.component.html unten RouterLink verwenden

  <div>
    <a mat-raised-button [routerLink]="['/add-song']">Add new song</a>
  </div>

Bis Sie jetzt versucht haben, einen relativen Pfad hinzuzufügen, wird der aktuelle Pfad in Winkle speziell in routerLink erkannt und der erwartete Pfad wird an das Ende Ihres aktuellen Pfads angehängt. So erhalten Sie einen Fehler Routen.

Die Methode this.router.navigate () kann die aktuelle Route jedoch nicht automatisch verstehen. Sie startet die Route immer von root route.ie wenn Sie versuchen, einen verschachtelten Pfad von der .ts-Datei aufzurufen, erkennt der aktuelle Pfad den aktuellen Pfad nicht Wenn Sie bereit sind, dem Winkel die aktuelle Route mitzuteilen, können Sie aus der .ts-Datei so etwas tun

import { ActivatedRoute, Router } from '@angular/router';
...
constructor(private route: ActivatedRoute, private router: Router) { }
...
this.router.navigate(['./add-song'], {relativeTo: this.route}); 

Eine weitere Sache ist wie <a mat-raised-button [routerLink]="['add-song']">Add new song</a> wie <a mat-raised-button [routerLink]="['./add-song']">Add new song</a> oder <a mat-raised-button [routerLink]="['../add-song']">Add new song</a> dies ist ein relativer Pfad, Sie müssen einen absoluten Pfad verwenden

Andernfalls rufen Sie Ihre Route von der .ts-Komponente ohne relativeTo-Eigenschaft und relativen Pfad auf.

Ich hoffe, das kann für Sie funktionieren

1
Prasanna Sasne

Das Problem ist, dass Sie keine Komponente für path "" definieren.

import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";

import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";

export const appRoutes: Routes = [
  {
    path: "",
    component: SplashComponent,
    children: [
      { path: "login", component: LoginComponent, pathMatch: "full" },
      { path: "watch", component: WatchComponent, pathMatch: "full" },
      {
        path: "admin",
        component: AdminComponent,
        pathMatch: "full",
        canActivate: [AdminGuard],
        children: [
          {
            path: "",
            component: AdminHomeComponent,
            pathMatch: "full",
            outlet: "admin"
          },
          {
            path: "add-song",
            component: AddSongComponent,
            pathMatch: "full",
            outlet: "admin"
          }
        ]
      }
    ]
  }
];
1
Debojyoti

Haben Sie versucht, Admin-bezogene Komponenten in einem eigenen Modul zu erstellen? Dann können Sie einen admin-routing.module.ts erstellen.

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: '',
        children: [
          { path: 'add-song', component: AddSongComponent },
          { path: 'something-else', component: SomeOtherComponent },
          { path: '', component: AdminDefaultComponent }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [ 
    RouterModule.forChild(adminRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule {}

Dann können Sie in Ihrem app-routing.module darauf verweisen

const appRoutes: Routes = [
  { path: '', component: SplashComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
  },
  { path: '**', component: SomeOtherComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
})
export class AppRoutingModule { }

edit : Ich habe festgestellt, dass Sie ein eigenes Untermodul erstellt haben. Sie müssen also ein Routing-Modul für dieses Untermodul erstellen.

1
DavidZ

Hier ist ein funktionierendes Beispiel für Ihren Code , der Fix löste einfach pathMatch: 'full' überall, außer für die Weiterleitungsroute.

Eine Umleitungsroute erfordert eine pathMatch-Eigenschaft, um dem Router mitzuteilen, wie eine URL mit dem Pfad einer Route abgeglichen werden soll. Der Router gibt einen Fehler aus, wenn Sie dies nicht tun. In dieser App sollte der Router die Route zur HeroListComponent nur auswählen, wenn die gesamte URL mit '' übereinstimmt. Setzen Sie den pathMatch-Wert daher auf 'full'.

Betrachten Sie die Dokumente, um mehr über die Eigenschaft zu erfahren.

0
chiril.sarajiu

Ich denke, Ihr Problem hängt mit dem Pfad zusammen, der für Anker Tag winklig erzeugt wird. Im Moment beziehen Sie sich auf einen Pfad "Add-Song". Angular betrachtet diesen Pfad als "localhost: 4200/add-song". Wenn Sie es zu admin/add-song weiterleiten möchten, müssen Sie den vollständigen Pfad definieren (wissen Sie nicht, warum Angle dies tut). Wenn du es versuchen könntest 

 <a mat-raised-button [routerLink]="['admin/add-song']">Add new song</a>

Dies mag für die Zeit funktionieren, aber es wäre keine perfekte Lösung. Danke

0
Ali Khan