要解决从服务返回的HTML未应用scss样式的问题,需要使用Angular的动态组件和ViewContainerRef。以下是一个可能的解决方法的代码示例:
首先,创建一个动态组件,用于呈现从服务返回的HTML并应用样式。在命令行中执行以下命令:
ng generate component DynamicComponent
在dynamic.component.ts文件中,添加以下代码:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-dynamic',
template: '',
styleUrls: ['./dynamic.component.scss']
})
export class DynamicComponent {
@Input() html: string;
}
然后,在父组件中使用ViewContainerRef来动态加载DynamicComponent并将服务返回的HTML传递给它。在父组件的ts文件中,添加以下代码:
import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
import { DynamicComponent } from './dynamic/dynamic.component';
import { YourService } from './your.service';
@Component({
selector: 'app-root',
template: ''
})
export class AppComponent implements AfterViewInit {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private yourService: YourService) {}
ngAfterViewInit() {
const html = this.yourService.getHTML(); // 从服务获取HTML
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const componentRef = this.container.createComponent(componentFactory);
componentRef.instance.html = html;
}
}
在上面的代码中,yourService是一个示例服务,通过getHTML方法获取HTML。
最后,在dynamic.component.scss文件中,添加所需的样式。
这样,从服务返回的HTML将以动态组件的形式附加到文档中,并且scss样式将被应用。