Блог

Я создал календарь, в котором я хочу иметь возможность планировать что-либо при нажатии в каждой ячейке. Если у меня есть, например, существующая «встреча», при нажатии на нее или внутри <li> нее должно появиться выпадающее окно с надписью «Просмотреть встречу».

Если я нажимаю за пределами уже существующей встречи внутри элемента, при нажатии на него я хочу, чтобы отображалось всплывающее выпадающее окно, в котором отображается другой набор параметров меню, таких как «Добавить время», «Время просмотра», «Добавить встречу», «Просмотреть встречи».

Вот файл .html

 <ng-container *ngIf="entries.length > 0 || appointments.length > 0 || recurrances.length > 0">
              <tr *ngFor="let w of allDates">
                <td class='days clickable' *ngFor="let d of w" (click)="openMenu($event,d)">
                  <span class="top-left">{{d.getDate()}}</span>
                  <h4 class="center">{{ getHours(d) }}</h4>
                    <ul>
                      <li class="sticky-note" *ngFor="let a of getAppointments(d)" (click)="openMenu2($event,a)">
                        {{a}}
                      </li>
                    </ul>
                </td>
              </tr>
            </ng-container>

            <ng-container *ngIf="entries.length == 0 amp;amp; appointments.length == 0 amp;amp; recurrances.length == 0">
              <tr *ngFor="let w of allDates">
                <td class='days' (click)="openMenu($event, d)" *ngFor="let d of w">
                    <span class="top-left">{{d.getDate()}}</span>
                </td>
              </tr>
            </ng-container>
        </table>
    </div>
</div>

<ng-template #userMenu let-e>
  <section class="user-menu">
    <div class="user-menu-item" (click)="showTicket(e)">View Ticket</div>
    <div class="user-menu-item" (click)="addTimeEntry(e)">Add time</div>
    <div class="user-menu-item" (click)="showTimeEntries(e)">View time</div>
    <div class="user-menu-item" (click)="addAppointment(e)">Add appointment</div>
    <div class="user-menu-item" (click)="showAppointmentEntries(e)">View appointments</div>
  </section>
</ng-template>
<ng-template #userMenu2 let-a>
  <section class="user-menu">
    <div class="user-menu-item" (click)="showAppointmentEntry(a)">View appointment</div>
  </section>
</ng-template>
 

С приведенным выше HTML-кодом я отображаю только первый <ng-template> , независимо от того, нажимаю ли я внутри <td> элемента, но вне <li> элемента, или внутри <li> элемента, но не внутри ` элемента.

Итак, как я могу это исправить, чтобы он отображал второй <ng-template> , когда я щелкаю внутри <li> элемента, и отображал только первый <ng-template> , когда я щелкаю вне <li> элемента?

Соответствующий код .ts

 @ViewChild('userMenu') userMenu: TemplateRef<any>;
@ViewChild('userMenu2') userMenu2: TemplateRef<any>;

openMenu(event: MouseEvent, param: any) { this.popup.open(event,this.userMenu,param,'start','center'); }
openMenu2(event: MouseEvent, appointment: IAppointment) { this.popup.open(event,this.userMenu2,appointment,'start','center'); console.log("click")}
closeMenu() { this.popup.close(); }
 

Angular — довольно мощная платформа, на основе которой я могу предложить вам решение вашей проблемы,

Сначала дайте ссылку на хэш в td качестве #tdElement ,

затем используйте (mouseenter) (mouseleave) события и li для добавления и удаления класса do-not-click на td

наконец, обработайте td событие click на основе добавленного класса do-not-click

вот демонстрация

 <td class='days clickable'
    #tdElement 
    *ngFor="let d of w" 
    (click)="tdElement.classList.contains('do-not-click') ? false : openMenu($event,d)">
     <span class="top-left">{{d.getDate()}}</span>
     <h4 class="center">{{ getHours(d) }}</h4>
     <ul>
        <li class="sticky-note" 
            *ngFor="let a of getAppointments(d)"
            (mouseenter)="tdElement.classList.add('do-not-click')" 
            (mouseleave)="tdElement.classList.remove('do-not-click')"
            (click)="openMenu2($event,a)">
          {{a}}
        </li>
     </ul>
 </td>