[英]Angular lags performance if multiple DOM elements inserted via dynamic component with binding
[英]angular 2/4 component manipulate the dom at dynamic elements?
我的标头包含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')
}
我可以按照以下步骤很容易地在我的组件中包含类似的内容:
"allowJS": true
设置为"allowJS": true
但是,这直接访问了dom。 我如何继续使用像toggleExpansion
这样的方法(因为它可以动态访问dom, 接收要操作的元素的自变量 ,从而可以在各种组件中重用),但是可以使用模板变量等以更角度的方式编写它-最好以某种混音或其他方式使用。
我在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
一起使用, elementRef
所示: 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')
}
在此链接中回答,您可以看到: https : //github.com/aimprogman/DomNodeAngular4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.