在我的角度2(RC5)项目中,我有许多组件都可以正常工作,但是,我添加了一个子模块,除了childComponent的styleUrl属性外,它工作正常.如果我在教程中使用相同的url路径(子模块的根组件),则应用样式.如果我向章节(子模块的子组件)添加完全相同的路径,那么样式不会应用?
博客中没有404,chrome的开发工具不会将chapter.css显示为源,或网络上存在的东西.
在这里,您可以看到导致我出现此问题的组件:
@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没有被选中……你可以在这里看到我的项目文件:
|-- 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',
为什么只有这个组件不起作用…我能看到的唯一区别是这个组件是一个子组件,所以也许这有所不同?
更新:
正如对答案的评论中所述,使用路径./app/tutorial/chapter/chapter.css可以在教程组件中使用,但完全相同的路径在章节组件(子组件)中不起作用.我还添加了ViewEncapsulation,但它不起作用……
解决方法
尝试将“encapsulation:ViewEncapsulation.None”添加到父组件
import {ViewEncapsulation} from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None })