在我的角度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
})
