在Angular 2中显示/隐藏面板

Question

我的应用加载了表格的一些HTML文字（字词+链接）：

<p>This OGR estimator is subject to the following <a class="collapsed">limitations</a> and <a class="collapsed">disclaimer</a>:</p>
<div id="limitations" class="collapse">...</div><div id="disclaimer" class="collapse">...</div><p>...</p>

我正在尝试创建一个指令，用于“激活”链接以切换目标div的可见性。到目前为止，该指令可以识别链接，但我不知道下一步该做什么 - 而且我也开始怀疑我的方法是jQuery-ish因此需要更好的指导。

我很欣赏有关如何（更好）继续进行的建议。

感谢/汤姆

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ selector: '[rewriteAnchors]' })

export class rewriteAnchors {

constructor(private el: ElementRef) { }

ngAfterViewInit() {
 const el = <HTMLAnchorElement>this.el.nativeElement;
 if (el) {  
   const links = Array.from(el.querySelectorAll("a.collapsed"))
   .map(l => (console.log(l),l))
   .forEach(l => l.addEventListener('click', this.doToggle(this)))
   ;
   }
 }

doToggle(me){
  return function doToggle(ev) {
   ev.preventDefault();
   const targetid = this.getAttribute("href").replace("#","");
   console.log("target div = "+targetid);
   };
 }
}