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

时间:2017-10-05 07:05:45

标签: angular

我想检测我是否点击了组件内部,但我有一些部分,我使用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是假的然后它总是检测到“外部”事件。

1 个答案:

答案 0 :(得分:0)

使用@ViewChild进行元素参考。示例和用法here