it-swarm.com.de

FEHLER Fehler: Nicht erfasst (versprochen), Keine Routen können gefunden werden. URL-Segment

Ich habe eine einfache Navigation in Winkel 6 App, 

Hier ist HTML

<nav class="main-nav>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
            <li class="main-nav__item">
              <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a>
            </li>
            <li class="main-nav__item"> 
              <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a>
            </li>

          </ul>
</nav>

hier ist app.routing modul

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: []
})
export class AppRoutingModule { }

Hier ist ein App-Modul

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';

@NgModule({
  declarations: [
    AppComponent,
    NgStickyDirective,
    MainLayoutComponent,
    MainNavDirective,
    AboutComponent,
    WhatwedoComponent,
    FooterComponent,
    WhyChooseUsComponent,
    TeamComponent,
    ProjectsComponent,
    ClientsComponent,
    HowItWorksComponent,
    PartnersComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

wenn ich meine App starte und auf uns klicke, erhalte ich folgende Fehlermeldung:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
    at

Ich habe eine andere Kombination ausprobiert, um das Problem zu lösen, kann diesen Fehler jedoch nicht beheben 

was mache ich falsch in meinem Code? Jede Hilfe wird dankbar sein

5
user9964622

Wenn Sie routerLink auf diese Weise verwenden, müssen Sie den Wert der Route angeben, zu der die Route führen soll. Wenn Sie jedoch routerLink mit der Eigenschaftsbindungssyntax verwenden, wie folgt: [routerLink], sollte dem Namen der Eigenschaft ein Name zugewiesen werden, dessen Wert die Route ist, zu der der Benutzer navigieren soll.

Um Ihr Problem zu beheben, ersetzen Sie routerLink="['/about']" durch routerLink="/about" in Ihrem HTML-Code.

Es gab auch andere Stellen, an denen Sie die Eigenschaftsbindungssyntax verwendet haben, als dies nicht wirklich erforderlich war. Ich habe es behoben und Sie können einfach die untenstehende Vorlagensyntax verwenden:

<nav class="main-nav>
  <ul 
    class="main-nav__list" 
    ng-sticky 
    addClass="main-sticky-link" 
    [ngClass]="ref.click ? 'Navbar__ToggleShow' : ''">
    <li class="main-nav__item" routerLinkActive="active">
      <a class="main-nav__link" routerLink="/">Home</a>
    </li>
    <li class="main-nav__item" routerLinkActive="active"> 
      <a class="main-nav__link" routerLink="/about">About us</a>
    </li>
  </ul>
</nav>

Es muss auch wissen, wo genau die Vorlage für die Komponente geladen werden soll, die der Route entspricht, die sie erreicht hat. Vergessen Sie deshalb nicht, einen <router-outlet></router-outlet> hinzuzufügen, entweder in Ihrer oben angegebenen Vorlage oder in einer übergeordneten Komponente.

Es gibt ein weiteres Problem mit Ihrer AppRoutingModule. Sie müssen die RouterModule von dort aus exportieren, damit sie beim Importieren für Ihre AppModule verfügbar ist. Um dies zu beheben, exportieren Sie es aus Ihrer AppRoutingModule, indem Sie es dem exports-Array hinzufügen.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }
3
SiddAjmera

Wie der Fehler besagt, sollte Ihr Router-Link mit den vorhandenen Routen übereinstimmen

Es sollte nur routerLink="/about sein

2
Sajeetharan

Falls Sie die []-Syntax benötigen, die für " edit forms " nützlich ist, wenn Sie Parameter wie id mit der Route übergeben müssen, würden Sie Folgendes tun:

[routerLink]="['edit', business._id]"

Wie für eine " about page " ohne Parameter wie bei Ihnen,

[routerLink]="/about"

oder 

[routerLink]=['about']

wird den Trick tun.

0
rtrigo