Question

我的标题有一个nav组件，其模板如下：

<nav><!--hamburger menu and stuff--></nav>
<aside><!--dropdown--></aside>

我还有其他扩展菜单的组件。出于可访问性原因，我使用aria-expanded和hidden属性编写此网站。

很自然地使用aria属性来切换抽屉的扩展，就像这个javascript一样：

let toggleMap = { true: 'false', false: 'true' }
//...
  toggleExpansion (sel) {  
    let state = document.querySelector(sel).getAttribute('aria-expanded')

    if(!Object.keys(toggleMap).includes(state)) // safety check
      return

    document.querySelector(sel)
      .setAttribute('aria-expanded', toggleMap[state])

    JSON.parse(state)? // it's safe now, because of the safety check
      document.querySelector(sel)
        .setAttributeNode(document.createAttribute('hidden')):
      document.querySelector(sel).removeAttribute('hidden')
  }

我可以很容易地在我的组件中包含类似的东西，按照以下步骤操作：

在 tsconfig.json 中，设置"allowJS": true
在组件中，导入该函数，然后将该函数用作组件中的方法。

然而，这直接访问dom。我怎样才能继续使用像toggleExpansion这样的方法（因为它动态地访问dom，接收参数以便操作哪个元素，从而可以在各种组件中重用），但写下这个以更有棱角的方式，使用模板变量等 - 最好以某种方式作为mixin或其他东西。

Answer 1

我在gitter通道上询问了角度，已经提到了这个想法：

如何从模板中引用模板变量？比如<li (click)="genericModifier(templateVariable)">

MilošLapiš回答我的语法是正确的。从那里我就能找到解决方案。

在每个组件中，您必须在模板和组件中指定要展开的抽屉。

模板

<nav><!--hamburger menu and stuff--></nav>
<aside #drawer><!--dropdown--></aside>

组件

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

// in the component:
export class NavigationComponent implements OnInit {
  @ViewChild('drawer') drawer: ElementRef;

现在在组件中，您将调用toggleExpansion，就像之前一样，但这次传递此上下文：

组件

import { library } from 'CommonUtils'
//..
  toggleExpansion(template_variable) { library.toggleExpansion(this, template_variable) }

然后我们可以将函数转换为与elementRef一起使用，如下所示：

CommonUtils

  toggleExpansion (context, tva) {
    let ele = context[tva].nativeElement  
    let state = ele.getAttribute('aria-expanded')

    if(!Object.keys(toggleMap).includes(state)) // safety check
      return

    state = JSON.parse(state)      

    ele.setAttribute('aria-expanded', toggleMap[state])

    state?
      ele.setAttributeNode(document.createAttribute('hidden')):
      ele.removeAttribute('hidden')
  }

Answer 2

通过此链接回答，您可以看到：https://github.com/aimprogman/DomNodeAngular4

角度2/4分量操纵动态元素的dom？

2 个答案:

模板

组件

组件

CommonUtils