javascript - JQuery 搜索仅限于 Angular 组件的 DOM

Question

我想在我的 Angular 组件中使用 JQuery 来进行 DOM 操作，但我想将 JQuery 搜索限制在它所使用的组件标记中。

我正在尝试使用 Shadow DOM，所以我有这个组件:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.less'],
  encapsulation: ViewEncapsulation.Native
})
export class LayoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  toggleSidebar(): void {
    $('.main-sidebar').toggleClass('active');
    $('.content-wrapper').toggleClass('expanded');
  }
}

这是 HTML:

<div class="wrapper">

  <header class="main-header">
    <a href="#" class="logo">Logo</a>
    <nav class="navbar">
        <button type="button" id="sidebar-collapse" class="btn btn-info navbar-btn" (click)='toggleSidebar()'>
            <i class="fa fa-align-left"></i>
        </button>          
    </nav>
  </header>

  <aside class="main-sidebar">
    <section class="sidebar">
      Sidebar
    </section>
  </aside>

  <div class="content-wrapper">
    <section class="content">
      Content
    </section>
  </div>

</div>

如果我删除 encapsulation 配置，它会起作用，但如果我保留它，JQuery 将无法找到搜索到的元素。我想知道如何让 JQuery 找到这些元素。除了使用 Shadow DOM 之外，还有其他限制 JQuery 搜索的方法吗？

Answer 1

为什么要使用 jQuery 进行菜单切换？将它与 Angular 应用程序一起使用不是好的做法。让 Angular 来做。

您可以使用主机绑定(bind)

HTML

<nav class="navbar">
   <button type="button" id="sidebar-collapse" class="btn btn-info navbar-btn" 
    (click)='toggleSidebar()'>
      <i class="fa fa-align-left"></i>
   </button> 
</nav>

<aside class="main-sidebar" [ngClass]="{'menu_open': menuOpen}">
   <section class="sidebar">
     Sidebar
   </section>
 </aside> 

组件

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

export class LayoutComponent implements OnInit {
   // set it closed by default
   @HostBinding('class.menu_open') public menuOpen = false;
   ....

   toggleSidebar() {
      this.menuOpen = !this.menuOpen;
   }
   ...
}