如何使用通用的ng-template导航到添加和编辑用户的屏幕?

Question

根据screenMode使用以下两个ng-containers来添加用户并导航到相应的屏幕进行编辑。因此，两个ng-containers的代码是相同的，只有第二个锚标记的文本是不同的。而不是一次又一次地编写相同的代码，我需要使用和共同的ng-template为此。那么，如何为此输入正确的模板呢?我创建的模板如下所示。如有任何建议，不胜感激。

<ng-container *ngIf="screenMode == screenStateEnum.ADD_USER">
<div class="breadcrumb">
<ol aria-label="breadcrumb">
<li>
<a id="ep-list"
class="hyperlink"
(click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
</li>
<li>
<a class="current">Add new User</a>
</li>
</ol>
</div>
<add-user [screenMode]= "'add'" [userId]="selectedRow?.id"
(goToUser)="refresh()"></-add-user>
</ng-container>
<ng-container *ngIf="screenMode == screenStateEnum.EDIT_USER">
<div class="breadcrumb">
<ol aria-label="breadcrumb">
<li>
<a id="ep-list"
class="hyperlink"
(click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
</li>
<li>
<a class="current">{{selectedRow?.user_name}}</a>
</li>
</ol>
</div>
<add-user [userId]="selectedRow?.id" [screenMode]= "'Edit'"
(goToUser)="refresh()"></add-user>
</ng-container>

用来替换上面代码的模板

<ng-template [ngIf]="screenMode == screenStateEnum.ADD_USER || screenMode == screenStateEnum.EDIT_USER" #userScreens>
<div class="breadcrumb">
<ol aria-label="breadcrumb">
<li>
<a id="ep-list"
class="hyperlink"
(click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
</li>
<li>
<a class="current">{{screenMode === screenStateEnum.ADD_USER ? Add new User: selectedRow?.user_name}}</a>
</li>
</ol>
</div>
</ng-template>

Answer 1

尝试以下步骤

1. 为添加用户创建父模板&编辑用户(因为HTML相同)
2. 然后在
之前添加模板
3. 改变ng-container工作与两个条件(screenMode = addUser || editUser)
4. 设置模板匹配上述条件
5. 使用三元改变锚标记HTML你想
6. 传递screenMode作为容器的screenMode