angular html代码合并

最新推荐文章于 2025-03-28 01:36:52 发布

原创最新推荐文章于 2025-03-28 01:36:52 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ngTemplateOutlet指令 #内嵌视图 #html代码简化

angular 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种通过使用ngTemplateOutlet指令来简化HTML代码重复的方法，该方法能够将多个地方重复的代码封装为动态模板，提高代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际项目开发中，一些具有相同功能的js或ts代码我们可以封装成一个函数，使用时直接调用。这样可以减少很多重复代码，增强代码的可读性。
如果是html代码重复，我们又应该怎么简化代码呢？
具体方法如下：
原代码：

			//判断baseInfo是对象还是数组
			 <div *ngIf="baseInfo.publicArr;else notypeBox">
			 	//baseInfo是对象的情况
                <div [ngClass]="{'typeBox1': baseInfo.publicArr}" class="typeBox">
                    <div class="title">非公有制经济组织</div>
                    <ng-container *ngFor="let info of baseInfo.publicArr">
                        <!--input-->
		                <div class="basicInfo" *ngIf="formType === 'input'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <ion-input clearInput autofocus size="100px" [value]="personInfo[field]"
		                               placeholder="请输入{{name}}" [(ngModel)]="personInfo[field]" [disabled]="isDisable"></ion-input>
		                </div>
		                <!--select-->
		                <div class="basicInfo" *ngIf="formType === 'select'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <div class="infoDetail">
		                        <ion-select [value]="personInfo[field]" [(ngModel)]="personInfo[field]"  [disabled]="isDisable"
		                                    cancelText="取消" okText="确定">
		                            <ion-select-option *ngFor="let select of selectorList" [value]="select.itemValue">
		                                {{select.itemName}}
		                            </ion-select-option>
		                        </ion-select>
		                    </div>
		                </div>
                    </ng-container>
                </div>
                <div [ngClass]="{'typeBox2': baseInfo.privateArr}" class="typeBox">
                    <div class="title">内部组织情况</div>
                    <ng-container *ngFor="let info of baseInfo.privateArr">
                        <!--input-->
		                <div class="basicInfo" *ngIf="formType === 'input'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <ion-input clearInput autofocus size="100px" [value]="personInfo[field]"
		                               placeholder="请输入{{name}}" [(ngModel)]="personInfo[field]" [disabled]="isDisable"></ion-input>
		                </div>
		                <!--select-->
		                <div class="basicInfo" *ngIf="formType === 'select'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <div class="infoDetail">
		                        <ion-select [value]="personInfo[field]" [(ngModel)]="personInfo[field]"  [disabled]="isDisable"
		                                    cancelText="取消" okText="确定">
		                            <ion-select-option *ngFor="let select of selectorList" [value]="select.itemValue">
		                                {{select.itemName}}
		                            </ion-select-option>
		                        </ion-select>
		                    </div>
		                </div>
                    </ng-container>
                </div>
            </div>
            <ng-template #notypeBox>
            	//baseInfo是数组的情况
                <ng-container *ngFor="let info of baseInfo">
                   	<!--input-->
		                <div class="basicInfo" *ngIf="formType === 'input'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <ion-input clearInput autofocus size="100px" [value]="personInfo[field]"
		                               placeholder="请输入{{name}}" [(ngModel)]="personInfo[field]" [disabled]="isDisable"></ion-input>
		                </div>
		                <!--select-->
		                <div class="basicInfo" *ngIf="formType === 'select'">
		                    <label><span *ngIf="must">*</span>{{name}}：</label>
		                    <div class="infoDetail">
		                        <ion-select [value]="personInfo[field]" [(ngModel)]="personInfo[field]"  [disabled]="isDisable"
		                                    cancelText="取消" okText="确定">
		                            <ion-select-option *ngFor="let select of selectorList" [value]="select.itemValue">
		                                {{select.itemName}}
		                            </ion-select-option>
		                        </ion-select>
		                    </div>
		                </div>
                </ng-container>
            </ng-template>

分析以上代码，不难发现，以下代码在三个地方重复使用，代码看着多而杂

						 <!--input-->
			                <div class="basicInfo" *ngIf="formType === 'input'">
			                    <label><span *ngIf="must">*</span>{{name}}：</label>
			                    <ion-input clearInput autofocus size="100px" [value]="personInfo[field]"
			                               placeholder="请输入{{name}}" [(ngModel)]="personInfo[field]" [disabled]="isDisable"></ion-input>
			                </div>
			                <!--select-->
			                <div class="basicInfo" *ngIf="formType === 'select'">
			                    <label><span *ngIf="must">*</span>{{name}}：</label>
			                    <div class="infoDetail">
			                        <ion-select [value]="personInfo[field]" [(ngModel)]="personInfo[field]"  [disabled]="isDisable"
			                                    cancelText="取消" okText="确定">
			                            <ion-select-option *ngFor="let select of selectorList" [value]="select.itemValue">
			                                {{select.itemName}}
			                            </ion-select-option>
			                        </ion-select>
			                    </div>
			                </div>

解决方案：使用 ngTemplateOutlet 指令创建动态模板
简化后代码：

			<div *ngIf="baseInfo.publicArr;else notypeBox">
                <div [ngClass]="{'typeBox1': baseInfo.publicArr}" class="typeBox">
                    <div class="title">{{baseInfo.title}}</div>
                    <ng-container *ngFor="let info of baseInfo.publicArr">
                    	// 创建动态模版 
                    	// commonForm：锚点变量名
                    	// info:传递的参数
                        <ng-container *ngTemplateOutlet="commonForm;context: info"></ng-container>
                    </ng-container>
                </div>
                <div [ngClass]="{'typeBox2': baseInfo.privateArr}" class="typeBox">
                    <div class="title">内部组织情况</div>
                    <ng-container *ngFor="let info of baseInfo.privateArr">
                        <ng-container *ngTemplateOutlet="commonForm;context: info"></ng-container>
                    </ng-container>
                </div>
            </div>
            <ng-template #notypeBox>
                <ng-container *ngFor="let info of baseInfo">
                    <ng-container *ngTemplateOutlet="commonForm;context: info"></ng-container>
                </ng-container>
            </ng-template>
            
            // 对应上面的commonForm
		    <ng-template #commonForm
		                             let-formType="formType"
		                             let-must="must"
		                             let-name="name"
		                             let-field="field"
		                             let-isDisable="isDisable"
		                             let-selectorList="selectorList"
		                >
                <!--input-->
                <div class="basicInfo" *ngIf="formType === 'input'">
                    <label><span *ngIf="must">*</span>{{name}}：</label>
                    <ion-input clearInput autofocus size="100px" [value]="personInfo[field]"
                               placeholder="请输入{{name}}" [(ngModel)]="personInfo[field]" [disabled]="isDisable"></ion-input>
                </div>
                <!--select-->
                <div class="basicInfo" *ngIf="formType === 'select'">
                    <label><span *ngIf="must">*</span>{{name}}：</label>
                    <div class="infoDetail">
                        <ion-select [value]="personInfo[field]" [(ngModel)]="personInfo[field]"  [disabled]="isDisable"
                                    cancelText="取消" okText="确定">
                            <ion-select-option *ngFor="let select of selectorList" [value]="select.itemValue">
                                {{select.itemName}}
                            </ion-select-option>
                        </ion-select>
                    </div>
                    <!--<div class="rightiIcon"></div>-->
                </div>
            </ng-template>