Question

我有一个侧栏，我想让孩子在用户点击它时显示它们。因此，当用户点击LinkTest时，我希望它对应的是显示块。下面是Angular和Typescript代码。 http://jsfiddle.net/2dwvLg9u/

<nav appMenu class="navmenu navmenu-default" role="navigation">
  <ul class="nav navmenu-nav">
    <li class="active"><a href="#">Link</a></li>
    <li #testElem><a href="#">LinkTest</a>
      <ul class="hidden" #testElem1>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
      </ul>
    </li>
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>

  </ul>
</nav>

以下是打字稿代码 -

import { Directive, Renderer2, OnInit, ElementRef, HostListener, HostBinding, Input, ViewChild } from '@angular/core';

@Directive({
  selector: '[appMenu]'
})
export class MenuDirective implements OnInit{

  constructor(private renderer: Renderer2) { }

  ngOnInit(){

  }
  @ViewChild('testElem') elRef:ElementRef;
  @HostListener('click') click(eventData: Event) {

    this.renderer.setStyle(this.elRef.nativeElement, 'display', 'block');


  }
}

Answer 1

这是一个没有指令的解决方案。它可以在组件视图中直接使用flag属性来显示/隐藏子选项，并基于此显示*ngIf。
该解决方案具有在子节点单击上执行相同操作的小罪魁祸首，即在子节点单击上关闭父节点。但这可以避免。要阻止它，我们需要在子点击上调用event.stopPropagation()。看看：

<强> HTML

<li (click)="showChild=!showChild" #testElem>
    <a href="#">LinkTest</a>
    <ul *ngIf="showChild" class="hidden" #testElem1> 
        <li (click)="onChildClick($event)"> //repeat it all for all child nodes
            <a href="#">Link1</a>
        </li>
 ...

<强>打字稿

  showChild;
  ...
  onChildClick(event){
    event.stopPropagation(); // this will prevent parent node closing on child node click
  }

Demo

Angular2左导航

1 个答案: