问题描述: 在Angular中,使用组件样式表(CSS)和外部的JavaScript文件来创建元素,但是这些动态创建的元素没有起作用。
解决方法:
下面是一个示例代码,演示了如何在Angular中动态创建元素并应用样式和外部JavaScript文件:
import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor(private renderer: Renderer2, private el: ElementRef) {}
ngOnInit() {
// 加载外部JavaScript文件
const script = this.renderer.createElement('script');
script.src = 'path/to/external/js/file.js';
this.renderer.appendChild(this.el.nativeElement, script);
// 动态创建元素
const dynamicElement = this.renderer.createElement('div');
dynamicElement.innerText = 'Dynamic Element';
this.renderer.addClass(dynamicElement, 'dynamic-element-class');
this.renderer.appendChild(this.el.nativeElement, dynamicElement);
}
}
在上面的示例中,我们使用了Angular的Renderer2服务来动态创建一个div元素,并给它添加了一个特定的类名。我们还使用Renderer2服务加载了一个外部JavaScript文件。
在组件的样式表(example.component.css)中,我们可以根据特定的类名来设置动态创建的元素的样式:
.dynamic-element-class {
color: red;
font-size: 16px;
}
通过以上解决方法,我们可以确保动态创建的元素能够正确地应用样式和外部JavaScript文件。