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

Question

I have a nav component for my header, with a template like:

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

I also have other components with expanding menus. I am writing this site using aria-expanded and hidden attributes for accessibility reasons.

It is natural to use the aria attributes to toggle the expansion of the drawers, like with this 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')
  }

I can include something like that in my components easily enough, following the steps:

1. in tsconfig.json , set "allowJS": true
2. in a component, import the function, then use that function as a method in the component.

However, that directly accesses the dom. How can I continue to use a method like toggleExpansion (in that it accesses the dom dynamically, receiving an argument for which element to manipulate, thereby being reusable in various components), but write this in a more angular way, using template variables or such -- preferably somehow as a mixin or something.

Answer 1

I asked on the gitter channel for angular, already onto the idea:

how do you refer to template variables from within the template? like <li (click)="genericModifier(templateVariable)">

Miloš Lapiš responded that my syntax was correct. From there I was able to work out a solution.

1. in each component, you will have to specify the drawer that is going to expand, both in the template and component.

template

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

component

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

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

2. now in the component, you will call toggleExpansion rather like before, but this time passing the this context:

component

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

3. We can then convert the function to work with elementRef 's like so:

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