【问题标题】:unable to route component over current component无法通过当前组件路由组件
【发布时间】:2020-07-05 14:25:44
【问题描述】:

我是 Angular 和路由的新手,遇到了我从 body.component 调用 question.component 并想用 替换它的情况em>question.component 但出现错误。以下是我的代码

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home', component: HeaderComponent,
    children: [
      { path: '', component: BodyComponent, outlet:'secondary'},
      { path: 'ask', component: QuestionComponent, outlet:'secondary'}
    ]
  },
];

app.component.html

<router-outlet></router-outlet>

header.component.html

<mat-toolbar class="mat-toolbars">
  <span>Header</span>
  <ng-template [ngIf]="!isLoggedIn">
    <button mat-button [matMenuTriggerFor]="menu">Login<mat-icon>login</mat-icon></button>
  </ng-template>
     <mat-menu #menu="matMenu" xPosition="before" >
        <span (click)="$event.stopPropagation();">
        </span>
  </mat-menu>
</mat-toolbar>
<div id="contentwrapper">
   <div class="main_content">
     <router-outlet name="secondary"></router-outlet>
   </div>
</div>

body.component.html

每当我点击询问按钮时,它不会将 question.component 路由到 body.component

<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="['ask']" skipLocationChange> <mat-icon>speaker_notes</mat-icon> </button>
</mat-card>

错误

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/ask'
Error: Cannot match any routes. URL Segment: 'home/ask'
    at ApplyRedirects.noMatchError (router.js:3387)
    at CatchSubscriber.selector (router.js:3351)

【问题讨论】:

标签: angular angular8 angular-routing


【解决方案1】:

您已将ask 路径的出口设置为二级出口,因此您可能尚未添加二级出口

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

并像这样使用该链接


<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="[{ outlets: { secondary: ['ask'] } }]" skipLocationChange> <mat-icon>speaker_notes</mat-icon> </button>
</mat-card>

检查这个帖子

Child Routes Angular

angular-router-series-secondary-outlets

【讨论】:

    猜你喜欢
    • 2016-10-10
    • 2020-10-24
    • 1970-01-01
    • 2018-11-11
    • 2016-12-29
    • 2020-03-12
    • 1970-01-01
    • 2016-05-09
    • 2019-08-05
    相关资源
    最近更新 更多