How to load a new view in the current view?

问题

I have angular 8 and a link that will create a new view.

The current link is like this:

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

and the new view is like this:

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

But so I want that:

...\item/new/Interview

will be loaded in the same view as: So replaced

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

So that the new will not be loaded in a totally new view.

So this I have as template 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>

And this I have as route:

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
    }
  },
];

and this is the 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>

if I do this

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

I get this error:

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'

I already made a child component of it:

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

if I do this:

 <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>

and this routerlink:

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

I still get this error:

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'

回答1:

Please concat yout path like this way.

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

with app.routing.module.ts path like this

{
    path: 'home/:id/item/new/:data', component:LoginComponent
},

try this it should work.

来源：https://stackoverflow.com/questions/60809692/how-to-load-a-new-view-in-the-current-view