Question

当我尝试加载主要组件时，我遇到了route-let问题。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddIssueComponent } from './components/add-issue/add-issue.component';
import { EditIssueComponent } from './components/edit-issue/edit-issue.component';
import { IssueListComponent } from './components/issue-list/issue-list.component';
import { ExampleRouteResolver } from './shared/example-route.resolver';
import { SearchareaComponent } from './components/searcharea/searcharea.component';
import { AdvDetailsComponent } from './components/adv-details/adv-details.component';
import { SearchResultComponent } from './components/search-result/search-result.component';
import { AsideSidebarComponent } from './components/aside-sidebar/aside-sidebar.component';
import { UserLoginComponent } from './components/user-login/user-login.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'issues-list' },
  { path: 'searcharea', component: SearchareaComponent},
  { path: 'add-issue', component: AddIssueComponent},
  { path: 'edit-issue/:id', component: EditIssueComponent },
  { path: 'issues-list', component: IssueListComponent/* ,children: [
    {path: 'edit-issue/:id', component: EditIssueComponent},
    {path: 'add-issue', component: AddIssueComponent}
  ],
  resolve: {results: ExampleRouteResolver},
  runGuardsAndResolvers: 'always'*/
} ,
{ path: 'adv-list', component: AdvDetailsComponent },
{ path: 'search-result/:value', component: SearchResultComponent },
{ path: 'login', component: UserLoginComponent },
{ path: 'aside-sidebar', component: AsideSidebarComponent, outlet:'sidebar'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

export class AppRoutingModule { }

app.component.html

    <app-app-header></app-app-header>
<!-- <app-app-header (searchListOutput)="searchListOutput($event)">  </app-app-header>  -->


<div style="display: flex;">

  <router-outlet></router-outlet>
  <router-outlet name="sidebar"></router-outlet>

</div>

<!-- <div>
  translation: translation pipe 
  <h1>{{ 'demo.title' | translate }}</h1>

  translation: directive (key as attribute)
  <p [translate]="'demo.text'"></p>

  translation: directive (key as content of element)
  <p translate>demo.text</p>
  <button (click)="switchLanguage('en')">en</button>
  <button (click)="switchLanguage('fr')">de</button>
</div> -->


<div>
  <app-app-footer></app-app-footer>

</div>

aside-sidebar.component.html：

<div style="width: 25%;">
<div class="rightcolumn" style="margin: 10px;">
    <div class="leftbar">
        <div class="card">
            <h2>About Me</h2>
            <div class="fakeimg" style="height:100px;">Image</div>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        </div>
    </div>
    <div class="leftbar">
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
        </div>
    </div>
    <div class="leftbar">
        <div class="card">
            <h3>Follow Me</h3>
            <p>Some text..</p>
        </div>
    </div>
    <div class="leftbar">
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
        </div>
    </div>
    <div class="leftbar">
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
        </div>
    </div>
    <div class="leftbar">
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
            <div class="fakeimg">
                <p>Image</p>
            </div>
        </div>
    </div>
</div>

aside-sidebar.component.ts：

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

@Component({
  selector: 'app-aside-sidebar',
  templateUrl: './aside-sidebar.component.html',
  styleUrls: ['./aside-sidebar.component.css']
})
export class AsideSidebarComponent  {
  constructor() { }
}

我在这里尝试访问http://localhost:4200/aside-sidebar

我收到以下错误：

     core.js:7187 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'aside-sidebar'
Error: Cannot match any routes. URL Segment: 'aside-sidebar'
    at ApplyRedirects.noMatchError (router.js:3410)
    at CatchSubscriber.selector (router.js:3374)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

当我删除出口{ path: 'aside-sidebar', component: AsideSidebarComponent, outlet:'sidebar'}出口参数并尝试访问它时，同样可以正常工作。

该组件可以在默认的路由器出口中正常加载。

我可以知道我的代码在哪里出错吗？

Answer 1

对于路径“ aside-sidebar”，您已经为命名路由器出口指定了配置，但是对于默认路由器出口没有任何配置。因此，它导致错误，即它无法匹配默认路由器出口的任何路由。

此外，当您删除插座参数时，侧边栏组件将被加载到主路由器插座中，而不是命名的插座中。

路由-无法匹配任何路由。网址段

1 个答案: