我的项目有 3 个内置模板,第一个用于登录页面,第二个用于表单,第三个用于管理仪表板模板。所有这 3 个模板都带有特定的 css/js/images。
我想将这些样式表绑定(bind)到一个组件,例如
- 对于登陆页面组件,仅使用的样式表来自 Assets /landing_page
- 对于表单页面组件,仅使用的样式表来自 asset/form
和
- 对于管理仪表板组件,仅使用的样式表来自 Assets /仪表板
我现在使用的方法是导入 CLI 数组样式中的所有样式表和 js 数组中的脚本文件。因此,所有样式都是重叠的,就像着陆页的按钮样式应用于所有其他按钮类型一样。
帮我摆脱困境
最佳答案
我发现只有 CSS 存在问题。 JS 和图像由您决定何时调用它。因此,要解决 CSS 问题,您可以执行如下操作。
在 @component
中的着陆页组件中装饰器添加styleUrls: ['<path_of_landing_page_css_file>']
属性如下所示。
@Component({
selector: 'landing-page.component',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.css','<path_of_landing_page_css_file_from_assests>',...],
})
就像你的组件的其余部分一样。并确保从 CLI 数组中删除该 css 导入链接。
关于javascript - 在 Angular 4/5/6/7 中对不同组件使用不同的样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53723953/