javascript - 如何在当前视图中加载新视图？

问题描述

我有 angular 8 和一个将创建新视图的链接。

当前链接是这样的：

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea

新视图是这样的：

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview

但所以我想要：

...\item/new/Interview

将在与以下相同的视图中加载：所以替换

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea

这样新的就不会被加载到一个全新的视图中。

所以这个我有模板view.component：

<ng-template mat-tab-label>
  <mat-icon class="interviews">speaker_notes</mat-icon>
  <span i18n>Interview reports</span>
{{ dossierItemsCountString(itemTypes.Interview) }}
   <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Interview]"
     >
      <mat-icon class="add_box">add</mat-icon>
    </a>
</ng-template>

这是我的路线：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'list',
    pathMatch: 'full'
  },
  {
    path: 'list',
    component: ListComponent,
    resolve: {
      dossiers: DossierListResolver
    }
  },
  {
    path: 'new',
    component: NewComponent
  },
  {
    path: ':dossierId/item/new/:dossierItemType',
    component: ItemComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },
  {
    path: ':dossierId/item/:dossierItemId',
    component: ItemComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },
  {
    path: ':dossierId',
    component: ViewComponent,
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },
];

这是 item.component：

<mat-card>
    <mat-card-header>
      <mat-card-title>
        <ng-container [ngSwitch]="item.itemType">
            <ng-container *ngSwitchCase="itemTypes.Interview">
                <mat-icon class="interviews">speaker_notes</mat-icon>
                <span i18n>Interview:</span>
            </ng-container>
            <ng-container *ngSwitchCase="itemTypes.Note">
                <mat-icon class="notes">note</mat-icon>
                <span i18n>Note:</span>
            </ng-container>
            <ng-container *ngSwitchCase="itemTypes.Goal">
                <mat-icon class="goals">grade</mat-icon>
                <span i18n>Goal:</span>
            </ng-container>
            <ng-container *ngSwitchCase="itemTypes.ActionStep">
                <mat-icon class="action-steps">list</mat-icon>
                <span i18n>ActionStep:</span>
            </ng-container>
        </ng-container>
        <span>{{ item.title}}</span>
      </mat-card-title>
      <mat-card-subtitle>
        <span *ngIf="!createdAtEqualsDate(item)">{{item.date | date: 'shortDate'}} <ng-template i18n>created</ng-template></span>
        <span>{{item.createdAt | date: 'short'}}</span>
        <span *ngIf="item.createdAt !== item.lastModifiedAt"><ng-template i18n>modified</ng-template> {{item.lastModifiedAt | date: 'short'}}</span>
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <ng-container *ngTemplateOutlet="itemForm; context: {item: item, formGroup: editItemForm, globalErrors: globalErrors}"></ng-container>
    </mat-card-content>
    <mat-card-actions>
        <button *ngIf="!editItemForm.pristine" mat-raised-button (click)="cancel()" i18n>Cancel</button>
        <button *ngIf="editItemForm.pristine" mat-raised-button (click)="cancel()" i18n>Back</button>
        <button *ngIf="!isNew" mat-raised-button color="primary" [appSubmitIfValid]="editItemForm" (valid)="save()" i18n>Update</button>
        <button *ngIf="isNew" mat-raised-button color="primary" [appSubmitIfValid]="editItemForm" (valid)="save()" i18n>Create</button>
    </mat-card-actions>
</mat-card>

如果我这样做

     <a [routerLink]="'/'+ dossier.id + '/item/new'+ itemTypes.Interview">

我收到此错误：

core.js:6406 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '06637e72-8915-4735-9400-4ef7705194ea/item/newInterview'
Error: Cannot match any routes. URL Segment: '06637e72-8915-4735-9400-4ef7705194ea/item/newInterview'

我已经做了一个子组件：

{
    path: ':dossierId',
    component: ViewComponent, children:[
    {  path: ':dossierId/item/:dossierItemId,', component: ItemComponent}
    ],
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },

如果我这样做：

 <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="goals">grade</mat-icon>
          <span i18n>Goals</span>{{ dossierItemsCountString(itemTypes.Goal) }}
          <a routerLink="{{dossier.id}}/item/new/{{itemTypes.Goal}}"
            ><mat-icon class="add_box">add</mat-icon>
          </a>
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Goal }"></ng-container>
      </mat-tab>

和这个路由器链接：


  {
    path: ':dossierId',
    component: ViewComponent, children:[
    {  path: ':dossierId/item/:dossierItemId,', component: ItemComponent}
    ],
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }
  },

我仍然收到此错误：

core.js:6406 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview'
Error: Cannot match any routes. URL Segment: '06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview'

标签： javascriptangularangular-routing

javascript - 如何在当前视图中加载新视图？

问题描述

解决方案

推荐阅读