<script data-jsd-embedded data-base-url="" data-key="" type="text/javascript" src="js-text-sample.js"></script>
以上是我在 index.html 上的示例腳本標簽
我想將它隱藏在 Angular 組件中。
角度組件將首先從 API 獲取配置。然后它將驗證是否需要隱藏腳本。
該腳本是一個嵌入式小部件，如果它在配置 API 上為假，我需要隱藏它。
如何從組件代碼中隱藏它？
uj5u.com熱心網友回復：
與其放置腳本標簽并擔心隱藏/顯示的邏輯，為什么不在運行時根據結果創建腳本標簽。
import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
class MyComponent implements OnInit {
constructor(
private _renderer2: Renderer2,
@Inject(DOCUMENT) private _document: Document
) { }
public ngOnInit() {
let script = this._renderer2.createElement('script');
script.src='_SOURCE_HERE_'
`;
this._renderer2.appendChild(this._document.body, script);
}
}
uj5u.com熱心網友回復：
你可以用經典的javascript方式來做。當您從 api 獲得回應時，查詢 DOM 以獲取對元素的參考并將其洗掉：
const element = document.getElementById('widgetContainerId');
element.parentElement.removeChild(element);
這將從 DOM 中洗掉小部件。
如果您想在應用程式生命周期的后期再次顯示它，那么您不應該從 DOM 中洗掉整個元素，而是隱藏它，可能使用display: none;：
const element = document.getElementById('widgetContainerId');
element.style.display = 'none';
每當您需要它再次可見時，將顯示屬性更新為其他內容，例如block：
element.style.display = 'block';
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/516226.html