Question

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

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

@JsonProperty

这是HTML：

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

如果删除<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>配置，它可以正常工作，但是如果我将它保留到位，JQuery就无法找到搜索到的元素。我想知道如何让JQuery找到这些元素。除了使用Shadow DOM之外，还有其他限制JQuery搜索的方法吗？

Answer 1

为什么要用jQuery切换菜单？将它与Angular应用程序一起使用并不是一个好习惯。让Angular去做。

您可以使用host binding

执行此操作

<强> 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;
   }
   ...
}

JQuery搜索仅限于Angular组件的DOM

1 个答案: