角度 2/4 组件在动态元素上操纵 DOM ?

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')
}

我可以按照以下步骤轻松地在我的组件中包含类似的东西：

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

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

Answer 1

我在gitter 频道上询问角度，已经有了这个想法：

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

米洛什·拉皮什回应说我的语法是正确的。从那里我能够制定出解决方案。

在每个组件中

1. ，您必须在模板和组件中指定要扩展的抽屉。

模板

<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;

2. 现在在组件中，您将像以前一样调用toggleExpansion，但这次传递了this上下文：

元件

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

3. 然后我们可以像这样将函数转换为与elementRef's 一起使用：

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