angular - Angular 指令创建重复元素
问题描述
我有一个大部分工作的 Angular 指令,但它在我的元素之后创建按钮和 ul class="dropdown" 的重复注入。谁能明白为什么这会重复?在纯 js 中工作正常。
我的指令:
import { Directive, ElementRef, Renderer2, HostListener, OnInit } from '@angular/core';
@Directive({
selector: '.dropdown-container'
})
export class DropdownDirective implements OnInit {
constructor(private el: ElementRef, private _renderer: Renderer2) {
}
ngOnInit(){
var dropdown = document.querySelectorAll('.customization-option');
// /////// Adding li's for each option ////////
for (var i = 0; i < dropdown.length; i++) {
var option = dropdown[i].querySelectorAll('option');
var options = [];
var drop;
for (var x = 0; x < option.length; x++) {
options.push(option[x].innerHTML);
}
drop = "<button>" + options[0] + "</button><ul class='dropdown'>";
options.forEach(addOptions);
drop += "</ul>";
console.log(drop);
dropdown[i].insertAdjacentHTML('afterend', drop)
}
function addOptions(value) {
drop += "<li>" + value + "</li>";
}
}
@HostListener('click') onClick(e) {
var thisDrop = this.el.nativeElement;
var opt = thisDrop.querySelector('.dropdown').children;
var buttonDrop = thisDrop.parentElement.parentElement.querySelector('button');
thisDrop.classList.toggle("active");
for (var i = 0; i < opt.length; i++) {
opt[i].addEventListener('click', function () {
var optValue = this.innerHTML;
buttonDrop.innerHTML = optValue;
this.parentElement.classList.remove('active');
});
}
}
}
在我的模板中:
<form [formGroup]="storeRequest">
<div class="container">
<h4>What can we do for you?</h4>
<div class="col-2-container">
<div class="fieldset">
<div class="dropdown-container" appDrop>
<label for="topic">Choose a Topic*</label>
<select name="topic" id="topic" class="customization-option" (change)="toggleForm($event)">
<option value="Become a Sponsor" selected>Become a Sponsor</option>
<option value="Host a Fundraising Event">Host a Fundraising Event</option>
<option value="Give a Donation">Give a Donation</option>
<option value="General Information">General Information</option>
</select>
</div>
</div>
</div>
<div class="col-2-container">
<div class="fieldset">
<label for="stCompany" appFocus>Company</label>
<input type="text" name="company" id="stCompany" autocomplete="on" appFocus />
</div>
</div>
<div class="col-2-container">
<div class="fieldset">
<label for="stFirstname" appFocus>First Name*</label>
<input type="text" name="firstname2" id="stFirstname" autocomplete="on" appFocus formControlName="stFirstname" />
<span *ngIf="!storeRequest.get('stFirstname').valid && storeRequest.get('stFirstname').touched" class="validation-error">Please enter your first name.</span>
</div>
<div class="fieldset">
<label for="stLastname" appFocus>Last Name*</label>
<input type="text" name="stLastname" id="stLastname" autocomplete="on" appFocus formControlName="stLastname" />
<span *ngIf="!storeRequest.get('stLastname').valid && storeRequest.get('stLastname').touched" class="validation-error">Please enter your last name.</span>
</div>
</div>
<div class="col-2-container">
<div class="fieldset">
<label for="stAddress1" appFocus>Address Line 1*</label>
<input type="text" name="stAddress1" id="stAddress1" autocomplete="on" appFocus formControlName="stAddress1" />
<span *ngIf="!storeRequest.get('stAddress1').valid && storeRequest.get('stAddress1').touched" class="validation-error">Please enter your address.</span>
</div>
<div class="fieldset">
<label for="stAddress2" appFocus>Address Line 2</label>
<input type="text" name="stAddress2" id="stAddress2" autocomplete="on" appFocus formControlName="stAddress2" />
</div>
</div>
<div class="col-2-container">
<div class="fieldset city">
<label for="stCity" appFocus>City*</label>
<input type="text" name="stCity" id="stCity" autocomplete="on" appFocus formControlName="stCity" />
</div>
<div class="fieldset zip">
<label for="stZip" appFocus>Zip Code*</label>
<input type="text" name="stZip" id="stZip" autocomplete="on" appFocus formControlName="stZip" />
<span *ngIf="!storeRequest.get('stZip').valid && storeRequest.get('stZip').touched" class="validation-error">Please enter your zip code.</span>
</div>
</div>
</div><!--Col-2 end-->
<div class="col-2-container">
<div class="fieldset">
<label for="stEmail" appFocus>Email*</label>
<input type="email" name="stEmail" id="stEmail" autocomplete="on" appFocus formControlName="stEmail" />
<span *ngIf="!storeRequest.get('stEmail').valid && storeRequest.get('stEmail').touched" class="validation-error">Please enter your valid email.</span>
</div>
<div class="fieldset">
<label for="stPhone" appFocus>Phone Number*</label>
<input type="tel" name="stPhone" id="stPhone" autocomplete="on" appFocus formControlName="stPhone" />
<span *ngIf="!storeRequest.get('stPhone').valid && storeRequest.get('stPhone').touched" class="validation-error">Please enter your valid phone.</span>
</div>
</div>
<h4>Best time to contact you?*</h4>
<div class="col-2-container">
<div class="fieldset">
<div class="dropdown-container" appDrop>
<label for="bestTime">Select a Time*</label>
<select name="bestTime" id="bestTime" class="customization-option">
<option value="Morning" selected>Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
</select>
</div>
</div>
</div>
<h4 *ngIf="!general">Does the organization have a 501 (c)3 Status?</h4>
<div *ngIf="!general" class="col-2-container">
<div class="radios-container">
<div class="radio-round">
<input type="radio" checked class="radio" name="c3" id="yes501" />
<label for="yes501">Yes</label>
</div>
<div class="radio-round">
<input type="radio" class="radio" name="c3" id="no501" />
<label for="no501">No</label>
</div>
</div>
</div>
<h4>What makes your organization a great fit for Zaxby's?</h4>
<div class="">
<textarea rows="8"></textarea>
</div>
<br />
<div class="required">*Required</div>
<div class="button-container">
<button class="button gray">Cancel</button>
<button class="button red">Submit</button>
</div>
</div>
</form>
它在大多数情况下都有效,但我在每个下拉菜单后创建了 2 个按钮和 2 个 ul。有什么建议么?提前致谢!
解决方案
谢谢安吉拉。你为我指明了正确的方向。我换了
document.querySelectorAll('.customization-option');
至
var dropdown = this.el.nativeElement.querySelectorAll('.customization-option');
将 el 定义为 ElementRef 之后
constructor(public el: ElementRef, private _renderer: Renderer2) {
this.el = el;
}
推荐阅读
- java - Keycloak roleResource.getRoleUserMembers(); 抛出 403 错误
- python - 如何在 vs-code 中定义虚拟环境
- python - 用python将一列的选定行转置为一行
- python - For 使用 pandas 按索引循环遍历多行
- powershell - 变量声明/符号
- c++ - 如何使用 `UnaryPredicate` lambda 过滤 constexpr `std::array`?
- azure - Azure Functions 的 Azure 队列触发器:配置最小轮询间隔
- visual-studio-code - VS Code 菜单的下拉列表显示乱码?
- python-3.x - PyTorch 展开与 as_stride
- python - “从链接列表中删除循环”中的运行时错误