首页 文章

如果我在某些元素上有ngIf,那么检测组件内部?

提问于
浏览
0

我想检测我是否点击了内部组件,但我有一些部分,我使用ngIf来显示或隐藏一些元素,这就是问题,因为它现在看不到那个元素,我得到了错误 . 任何建议如何解决这个问题?

handleClick(event){
        var clickedComponent = event.target;
        console.log(event.target,'adsadasdas');
        var inside = false;
        do {
            if (clickedComponent === this._eref.nativeElement) {
                inside = true;
            }
            clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if(inside){
            console.log('inside');
        }else{
            console.log('outside');
        }
    }

我有侧边栏组件 . 在侧边栏我有这个:

<default-block head="Podaci o korisniku" class="z-col-24" block="blockgroup" [(visible)]="isCustomerVisible || getFromModal" [mainBlock] = "isVisibleBackCa"  [additionalItems]="true" (buttonClick)="getFromHistory()"
                        (openModal)="showModal($event)"  [ngClass]="{disabledCa: disabled}">


                        <div default-block="body" class="contact-body pointer">
                            <div class="contact-body-wrapper" dnd-draggable  [dragData]="customerGeneralInfo" (onDragStart)="dnd.set(true);" (onDragEnd)="dnd.set(false)" >
                                <span class="inline" *ngIf="customerGeneralInfo?.customerinfo?.lastname">
                                    <div class="z-inputs" >
                                        <label>Korisnik</label>
                                        <span disabled class="textarea"> {{customerGeneralInfo?.customerinfo?.lastname}} </span>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.customertypeName">
                                    <div class="z-inputs">
                                        <label>Tip</label>
                                        <input class="readonly"  [ngModel]="customerGeneralInfo?.customertypeName" type="text" disabled>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.customerstypeName">
                                    <div class="z-inputs">
                                        <label>Podtip</label>
                                        <span class="textarea">{{customerGeneralInfo?.customerstypeName}}</span>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.parentName">
                                    <div class="z-inputs">
                                        <label>Parent</label>
                                        <span class="textarea" disabled>{{customerGeneralInfo?.parentName}}</span>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.headName">
                                    <div class="z-inputs">
                                        <label>Nosilac hijerarhije</label>
                                        <span class="textarea" disabled >{{customerGeneralInfo?.headName}}</span>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.activationdate">
                                    <div class="z-inputs">
                                        <label>Datum aktivacije korisnika</label>
                                        <input class="readonly"  [ngModel]="customerGeneralInfo?.activationdate | date:'dd.MM.yyyy'"  type="text" disabled>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.terminationdate">
                                    <div class="z-inputs">
                                        <label>Datum isključenja korisnika</label>
                                        <input class="readonly"  [ngModel]="customerGeneralInfo?.terminationdate | date:'dd.MM.yyyy'" type="text" disabled>
                                    </div>
                                </span>
                                <span class="inline" *ngIf="customerGeneralInfo?.description">
                                    <div class="z-inputs">
                                        <label>Razlog isključenja korisnika</label>
                                        <input class="readonly" [ngModel]="customerGeneralInfo?.description" type="text" disabled>
                                    </div>
                                </span>
                            </div>
</default-block>

我有多个 <default-block> ,其中我有可见的真或假,适用于ngIf . 现在,当我点击侧边栏上的somem meni时,我将在侧边栏组件中显示该块 . 问题是我在这些块之间切换,因为它们是隐藏的event.target是false然后它总是检测"outside"事件 .

1 回答

  • 0

    使用@ViewChild进行元素引用 . 示例和用法here

相关问题