Javascript 如何用其他部件替换部件的一部分？

我有一个组件：`selector:'app view'，但要替换模板的一部分：

<div>
content
</div>

如果触发此按钮：

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

添加

最好的方法是什么

多谢各位

这是一个组件：

selector: 'app-item',

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

档案
{{dossier.name}
编辑
{{dossier.createdAt|date:'shortDate'}
取消
更新
重置
演讲者注
访谈报告{{dossieritemcountstring（itemTypes.Interview）}
添加
笔记
注释{{dossieritemcountstring（itemTypes.Note）}
添加
等级
目标{{dossieritemcountstring（itemTypes.Goal）}
添加
列表
操作步骤{{dossieritemcountstring（itemTypes.ActionStep）}
添加

但您只想更换此部件：

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

重置
演讲者注
访谈报告{{dossieritemcountstring（itemTypes.Interview）}
添加
笔记
注释{{dossieritemcountstring（itemTypes.Note）}
添加
等级
目标{{dossieritemcountstring（itemTypes.Goal）}
添加
列表
操作步骤{{dossieritemcountstring（itemTypes.ActionStep）}
添加
{{item.date}date:'shortDate'}已创建
{{item.createdAt|date:'short'}
修改{item.lastModifiedAt |日期：'short'}
编辑

使用此组件：

selector: 'app-item',

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

演讲者注
采访：
笔记
注:
等级
目标：
列表
行动步骤：
{{item.title}
{{item.date}date:'shortDate'}已创建
{{item.createdAt|date:'short'}
修改{item.lastModifiedAt |日期：'short'}
取消
返回
更新
创造

您需要询问您的应用程序项中需要哪些变量

我看到您需要

项

和

表单组

-我只看了一下代码-，所以您需要向组件中添加两个

@Input（）

如果应用程序项中有影响应用程序视图的函数，则需要使用输出

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

@Input（）项：任意
@输入（“组”）formGroup:formGroup
@Output（）傻瓜=新的EventEmitter（）；

如果您需要从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>

...
点击
为什么要部分替换组件的模板？这听起来不是一个好的设计。可能是如果你能提供细节，就更容易想出更好的解决方案。你能说得更清楚些吗？是否要用应用程序视图组件动态替换div标记内的“内容”？使用事件并替换任何需要的内容；使用Typescript/Javascript的任何部分、任何样式、任何内容。在HTML中，在设计时包含这些部分，但在准备好之前不显示它们。翻转以显示为真，其余部分由角度处理。@JohnPeters。对不起，我什么都听不懂你说的