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

Question

我有角度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
    }
  },

Answer 1

请以这种方式连接您的路径。

<a routerLink="{{item.id}}/item/new/{{item.name}}">
    <mat-icon class="add_box">add</mat-icon>
</a>

具有
app.routing.module.ts这样的路径
{
    path: 'home/:id/item/new/:data', component:LoginComponent
},

尝试它应该起作用。