Angular 5 删除特定的 DOM 元素

Posted 2023-03-13

【中文标题】Angular 5 删除特定的 DOM 元素

【英文标题】：Angular 5 remove specific DOM elements

【发布时间】：2018-12-03 18:50:52

【问题描述】：

我有一个小问题，我不知道该怎么做。我只是在学习 Angular / Typescript，我不知道如何删除一些 DOM 元素。 我有一些自动生成的内容，有特定的 CSS 类。不幸的是，这些对象是在其他地方生成的，我无法以任何方式配置它们，因此我无法在该内容上添加任何 ngIf 或任何其他内容，这将简化我的工作......我只需要使用它们。 我想要实现的是这样的（jQuery版本）：

$("#button").click(function() 
    $('.fc-oss').toggle();
 );

我有一个开关，我想在它上面附加一个事件，当它被激活时，它会隐藏/显示视图中具有该特定类型的所有元素。我试图在没有 jQuery 的情况下以角度实现这一点，但收效甚微。关于如何实现这一目标的任何想法？

【参考方案1】：

你可以使用*ngIf="boleanVar"，在你的ts中初始化'boleanVar = true'在你的ts中并添加<br>< button (click)="boleanVar = !boleanVar"> Toggle visibility</button>

【讨论】：

问题是我无法将 *ngIf 添加到元素中。它们是在其他地方生成的。我完全无法控制它们或它们的属性。我只有一个类来标识它是哪种类型的元素。

constructor(private renderer: Renderer, private elem: ElementRef) 并获取您的元素： let elements = this.elem.nativeElement.querySelectorAll('.fc-oss');希望对你有帮助

【参考方案2】：

您可以为此使用 ngif 指令。

@Component(
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">show ? 'hide' : 'show'</button>
    show = show
    <br>
    <div *ngIf="show">Text to show</div>
`
)
class NgIfSimple 
  show: boolean = true;

根据变量show的值，div元素将切换视图。

【讨论】：

我知道我可以做到这一点，但我无法将 *ngIf 添加到我的元素中。它们是在其他地方生成的，我无法访问它们或它们的属性。

【参考方案3】：

在 Angular 中，您可以直接访问 DOCUMENT。

import  Inject, Injectable  from '@angular/core';
import  DOCUMENT  from '@angular/platform-browser';

@Injectable()
export class MyService 
  constructor(@Inject(DOCUMENT) private document: any) 

有了这个你就可以访问你的元素并为它定义一些逻辑

let element = this.document.getElementbyClassName('fc-oss');
element.style.display = element.style.display === 'none' ? 'block' : 'none';

【讨论】：

在这种情况下，我不明白我应该如何使用 MyService，或者在第二部分中我应该在哪里编写代码。如果我正在导出 MyService 类，这意味着我应该在我的组件中导入它，那么我应该以某种方式使用它（从你的示例中不能完全说出如何）

不，MyService 就是一个例子。您可以注入类似于您的组件的 DOCUMENT 对象。所以你的代码可以是：export class MyComponent constructor(@Inject(DOCUMENT) private document: any)

看来，从'@angular/platform-b​​rowser'导入文档；已从 Angular 8 中弃用