как выбрать значение из многоступенчатого списка

Question

Я сделал многошаговый выпадающий список, используя UL и Li

код:

            <li><a href="#">{{dropdowntext}}</a>
              <ul>
                <li><a href="#">Exception on Leave</a></li>
                <li><a href="#">Performance Reward</a>
                  <ul>
                    <li><a href="#">Double Beat Working</a></li>
                    <li><a href="#">Working on Weekly-Off/Holiday</a></li>

                  </ul>
                </li>

              </ul>
            </li>

          </ul>

Пожалуйста, смотрите: https://stackblitz.com/edit/angular-7cwuuw?file=src%2Fapp%2Fapp.component.html

Как мне взять выбранное значение из выпадающего списка, используя UL Li, в файл ts.

Я пытался сделать это, используя бит NgModule. Это не сработало. Пожалуйста, посмотрите на это.

Answer 1

Поскольку это чистое CSS решение для раскрывающегося списка, NgModule не будет работать, потому что ванильные элементы HTML не имеют этих директив. Однако вы можете назначить общую ссылочную переменную шаблона всем тегам привязки и назначить им общий обработчик событий. Попробуйте следующее

Шаблон

<ul class="main-navigation">
  <li><a #option href="#">Select</a>
    <ul (select)="gg($event)" (change)="onChange($event)">
      <li><a #option href="#">Exception on Leave</a></li>
      <li><a #option href="#">Performance Reward</a>
        <ul>
          <li><a #option href="#">Double Beat Working</a></li>
          <li><a #option href="#">Working on Weekly-Off/Holiday</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Контроллер

import { Component, ViewChildren, ElementRef, Renderer2, QueryList } from '@angular/core';

export class AppComponent  {
  @ViewChildren('option', { read: ElementRef }) private options: QueryList<ElementRef>;
  private onMouseUp = (data) => { console.log(data); }

  constructor(private renderer: Renderer2) { }

  gg(evwent){
    alert("vdjv");
  }

  onChange(event) {
    console.log(event);
  }

  ngAfterViewInit() {
    this.options.forEach(option => {
      this.renderer.listen(option.nativeElement, 'mouseup', () => {
        this.onMouseUp(option.nativeElement.innerHTML);
      });
    })
  }
}

Я изменил ваш Stackblitz