web-dev-qa-db-ja.com

Angular 5特定のDOM要素を削除

どうすればいいのかわからない小さな問題があります。 Angular/TypeScriptを学習しているだけで、DOM要素を削除する方法がわかりません。特定のCSSクラスを含む自動生成されたコンテンツがあります。オブジェクトはどこかに生成されます他の方法でそれらを構成することはできないため、そのコンテンツにngIfやその他を追加することはできません。これにより、私の作業が簡単になります...私はそれらを使用する必要があります。達成したいのは、次のようなものです（jQueryバージョン） ：

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

トグルがあり、アクティブ化されているときに、ビューからその特定のタイプのすべての要素を非表示/表示するイベントをそれに関連付けたいです。 angular jQueryなしでこれを達成しようとしていますが、ほとんど成功していません。これを達成する方法についてのアイデアはありますか？

javascriptjqueryangulartypescriptangular5
5
Vlad N

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';
3
VadimB

_*ngIf="boleanVar"_で作業し、tsでそれを初期化し、tsで_'boleanVar = true'_を追加して、<br>< button (click)="boleanVar = !boleanVar"> Toggle visibility</button>を追加できます。

1
Romain capelleman

そのために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要素はビューを切り替えます。

0
Liju Kuriakose