Angular 6:如何在MVC的cshtml页面中使用css和js文件并应用到Angular项目中。
创始人
2024-10-16 13:01:59
0

在Angular项目中,可以通过在MVC的cshtml页面中引入css和js文件来应用到Angular项目中。以下是一种解决方法:

  1. 在MVC的cshtml页面中引入所需的css和js文件。例如,在cshtml页面的标签内引入css文件和在标签末尾引入js文件:

    


    
    
    

  1. 在Angular项目的根组件中,使用Angular的内置构造函数Renderer2来动态创建和加载css和js文件。在根组件的构造函数中注入Renderer2
import { Component, Renderer2 } from '@angular/core';

@Component({
    selector: 'app-root',
    template: ''
})
export class AppComponent {
    constructor(private renderer: Renderer2) {
        this.loadCss('path/to/style.css');
        this.loadJs('path/to/script.js');
    }

    private loadCss(url: string) {
        const link = this.renderer.createElement('link');
        link.rel = 'stylesheet';
        link.href = url;
        this.renderer.appendChild(document.head, link);
    }

    private loadJs(url: string) {
        const script = this.renderer.createElement('script');
        script.src = url;
        this.renderer.appendChild(document.body, script);
    }
}
  1. 然后,在根组件的构造函数中,使用Renderer2createElement方法创建