Как заменить часть компонента другим компонентом? - PullRequest
Новая
       0

Как заменить часть компонента другим компонентом?

0 голосов
/ 19 марта 2020

У меня есть компонент: `селектор: 'app-view', но я хочу заменить частичную часть шаблона: 

<div>
content
</div>

другим компонентом: 

selector: 'app-item',

если эта кнопка сработала: 

 <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Goal]"
          ><mat-icon class="add_box">add</mat-icon>

Каков наилучший способ сделать это?

Спасибо

Это компонент: 


 <mat-card>
  <mat-card-header>
    <mat-card-title>
      <span i18n>Dossier</span>
      <span [style.display]="editDossierForm.enabled ? 'none' : null">
        {{ dossier.name }}
        <button mat-icon-button (click)="editName()" i18n-title title="Edit">
          <mat-icon>edit</mat-icon>
        </button>
      </span>
      <span [style.display]="editDossierForm.enabled ? null : 'none'">
        <form [formGroup]="editDossierForm">
          <app-global-validation-error [errors]="globalEditDossierErrors"></app-global-validation-error>
          <mat-form-field>
            <input matInput i18n-placeholder="Name" formControlName="name" autocomplete="off" required />
            <mat-error>
              <app-form-validation-error [errors]="editDossierForm.controls.name.errors"></app-form-validation-error>
            </mat-error>
          </mat-form-field>
        </form>
      </span>
    </mat-card-title>
    <mat-card-subtitle>
      {{ dossier.createdAt | date: 'shortDate' }}
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-actions *ngIf="editDossierForm.enabled">
    <button mat-raised-button (click)="cancelEditDossier()" i18n>Cancel</button>
    <button mat-raised-button color="primary" [disabled]="editDossierForm.invalid" (click)="submitEditDossier()" i18n>
      Update
    </button>
  </mat-card-actions>
</mat-card>


<mat-card>
  <mat-card-actions class="dossier-item-actions">
    <span>
      <mat-form-field class="filter">
        <input
          #searchQueryInput
          matInput
          placeholder="Filter"
          (keyup)="searchDossieritems($event.target.value)"
          i18n-placeholder
        />
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="searchQueryInput.value = ''; searchDossieritems('')" i18n>
        reset
      </button>

    </span>
    <span class="spacer"></span>
    <span> </span>
  </mat-card-actions>
  <mat-card-content>
    <mat-tab-group  [selectedIndex] = "selectedTab" (selectedIndexChange)="setTabState($event)" >
      <mat-tab>
        <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>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Interview }"></ng-container>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="notes">note</mat-icon>
          <span i18n>Notes</span>{{ dossierItemsCountString(itemTypes.Note) }}
          <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Note]"
          ><mat-icon class="add_box">add</mat-icon>
        </a>
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Note }"></ng-container>
      </mat-tab>
      <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>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="action-steps">list</mat-icon>
          <span i18n>Action steps</span>{{ dossierItemsCountString(itemTypes.ActionStep) }}
          <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.ActionStep]"
          ><mat-icon class="add_box">add</mat-icon>
        </a>
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.ActionStep }"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

Но хочу только заменить эту часть: 


<mat-card>
  <mat-card-actions class="dossier-item-actions">
    <span>
      <mat-form-field class="filter">
        <input
          #searchQueryInput
          matInput
          placeholder="Filter"
          (keyup)="searchDossieritems($event.target.value)"
          i18n-placeholder
        />
      </mat-form-field>
      <button mat-raised-button color="primary" (click)="searchQueryInput.value = ''; searchDossieritems('')" i18n>
        reset
      </button>

    </span>
    <span class="spacer"></span>
    <span> </span>
  </mat-card-actions>
  <mat-card-content>
    <mat-tab-group  [selectedIndex] = "selectedTab" (selectedIndexChange)="setTabState($event)" >
      <mat-tab>
        <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>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Interview }"></ng-container>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="notes">note</mat-icon>
          <span i18n>Notes</span>{{ dossierItemsCountString(itemTypes.Note) }}
          <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.Note]"
          ><mat-icon class="add_box">add</mat-icon>
        </a>
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Note }"></ng-container>
      </mat-tab>
      <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>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="action-steps">list</mat-icon>
          <span i18n>Action steps</span>{{ dossierItemsCountString(itemTypes.ActionStep) }}
          <a [routerLink]="['../', dossier.id, 'item', 'new', itemTypes.ActionStep]"
          ><mat-icon class="add_box">add</mat-icon>
        </a>
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.ActionStep }"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>



<ng-template #itemList let-itemType="itemType">
  <mat-card *ngFor="let item of dossierItemsBy(itemType); let i = index" class="dossier-item-view">
    <mat-card-header>
      <mat-card-title>
        <span [innerHTML]="item.title | highlight: searchQuery"></span>
        <span class="spacer"></span>
      </mat-card-title>

      <div class="mat-card-header-text">
        <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
        >
      </div>
      <span>
        <a mat-icon-button [routerLink]="['../', dossier.id, 'item', item.id]" i18n-title title="Edit">
          <mat-icon>edit</mat-icon>
        </a>
      </span>
    </mat-card-header>
    <mat-card-content>
      <ng-container *ngTemplateOutlet="itemView; context: { item: item }"></ng-container>
    </mat-card-content>
  </mat-card>
</ng-template>

на этот компонент: 

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

<ng-template #itemForm let-formGroup="formGroup" let-globalErrors="globalErrors">
    <form [formGroup]="formGroup">
      <app-global-validation-error [errors]="globalErrors" ></app-global-validation-error>
      <mat-form-field class="full-width">
        <input matInput i18n-placeholder="Title" formControlName="title" autocomplete="off"  required>
        <mat-error>
          <app-form-validation-error [errors]="formGroup.controls.title.errors" ></app-form-validation-error>
        </mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="myDatepicker" formControlName="date">
        <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
        <mat-datepicker #myDatepicker></mat-datepicker>
        <mat-error>
          <app-form-validation-error [errors]="formGroup.controls.date.errors" ></app-form-validation-error>
        </mat-error>
      </mat-form-field>
      <quill-editor class="full-width" formControlName="body" [required]="true"></quill-editor>
      <mat-error *ngIf="formGroup.controls.body.dirty || formGroup.controls.body.touched">
        <app-form-validation-error [errors]="formGroup.controls.body.errors" ></app-form-validation-error>
      </mat-error>
    </form>
</ng-template>

1 Ответ

0 голосов
/ 19 марта 2020

Вам нужно спросить, какие переменные вам нужны в элементе приложения?

Я вижу, что вам нужны item и formGroup - я только смотрю на код, поэтому вам нужно добавить к вашему компоненту два @Input()

Если у вас есть функция в app-item, которая влияет на представление приложения, вам нужно использовать Ouput 

@Input() item:any
@Input('group') formGroup:FormGroup
@Output() fool=new EventEmitter<any>();

И если вам это нужно от app-view выполняет функцию app-view (лучше избегать этого), вы можете использовать ссылочную переменную.

Таким образом, ваш app-view становится похож на 

<mat-card>
  <mat-card-header>
   ...
  <!--e.g. you has a button-->
  <button (click)="doSomething(appItem)">click</button>
</mat-card>
<app-item #appItem [item]="item" [group]="formGroup" (fool)="someFunction($event)>
</app-item>

Извините, я ' м спешит изучить весь код

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...