Как загрузить новый вид в текущий вид?

Question

У меня есть 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'

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

попробуйте это, он должен работа.