在Angular中,可以使用ngAfterViewInit
钩子函数来延迟加载CSS。在app.component.ts
文件中,可以使用Renderer2
服务来动态创建并加载CSS。
首先,确保已导入Renderer2
服务:
import { Component, Renderer2 } from '@angular/core';
然后,在组件类中注入Renderer2
服务,并在ngAfterViewInit
钩子函数中创建并加载CSS:
export class AppComponent {
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
const style = this.renderer.createElement('link');
this.renderer.setAttribute(style, 'rel', 'stylesheet');
this.renderer.setAttribute(style, 'href', 'path/to/styles.css');
this.renderer.appendChild(document.body, style);
}
}
在上面的代码中,我们创建了一个link
元素,并设置了其rel
和href
属性,然后使用appendChild
方法将其添加到document.body
中。这样可以确保CSS在app-root
内部延迟加载。
请将path/to/styles.css
替换为实际的CSS文件路径。