CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css-styleUrls没有加载到angular2 ChildComponent(RC5)中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的角度2(RC5)项目中,我有许多组件都可以正常工作,但是,我添加了一个子模块,除了childComponent的styleUrl属性外,它工作正常.如果我在教程中使用相同的url路径(子模块的根组件),则应用样式.如果我向章节(子模块的子组件)添加完全相同的路径,那么样式不会应用?

博客中没有404,chrome的开发工具不会将chapter.css显示为源,或网络上存在的东西.@H_874_3@

在这里,您可以看到导致我出现此问题的组件:@H_874_3@

@Component({
  SELEctor: 'chapter',template: `<div [innerHTML]="content"></div>`,styleUrls: ['app/tutorial/chapter/chapter.css']
})
export class chapterComponent implements OnInit,OnDestroy {
  private sub: Subscription;
  private content: String = '';

  constructor( private route: ActivatedRoutE) {  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      var that = this;
      var _url = './chapter/' + params['id'] + '.html';
      $.ajax({
        url: _url,success: function (result) {
          that.content = result;
        }
      });
    });
  }
}

chapter.css没有被选中……你可以在这里看到我的项目文件:@H_874_3@

|-- error.html',|-- index.html',|-- app',|-- app.component.ts',|-- app.module.ts',|-- app.routes.ts',|-- main.ts',|-- home',|   |-- home.component.ts',|   |-- home.css',|   |-- home.html',|-- tutorial',|-- tutorial.component.ts',|-- tutorial.css',|-- tutorial.html',|-- tutorial.module.ts',|-- tutorial.routes.ts',|-- chapter',|-- chapter.component.ts',|-- chapter.css',|-- chapter.html',

为什么只有这个组件不起作用…我能看到的唯一区别是这个组件是一个子组件,所以也许这有所不同?@H_874_3@

更新:@H_874_3@

正如对答案的评论中所述,使用路径./app/tutorial/chapter/chapter.css可以在教程组件中使用,但完全相同的路径在章节组件(子组件)中不起作用.我还添加了ViewEncapsulation,但它不起作用……@H_874_3@

解决方法

尝试将“encapsulation:ViewEncapsulation.None”添加到父组件
import {ViewEncapsulation} from '@angular/core';  

   @Component({
       encapsulation: ViewEncapsulation.None
     })

大佬总结

以上是大佬教程为你收集整理的css-styleUrls没有加载到angular2 ChildComponent(RC5)中全部内容,希望文章能够帮你解决css-styleUrls没有加载到angular2 ChildComponent(RC5)中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。