javascript - 在 Angular 4/5/6/7 中对不同组件使用不同的样式表

标签 javascript angular angular-ui-router angular-cli mean

我的项目有 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/

相关文章:

javascript - ReferenceError 找不到变量 : $

javascript - 学习 JavaScript - for-in 语句最多。结果

Angular 5 :Calling service method inside custom validator

javascript - 如何使用纯 JavaScript 在 Angular2 中使用 RouteConfig?

AngularJS ui-router 状态不会在后面刷新

angularjs - 何时使用子状态与ui-router的多个 View

javascript - 如何使用多种子状态组合来简化 angular-ui-router 嵌套状态?

检查数字是否为回文的Javascript函数

Angular 对象变化检测

javascript - 动画如何为不同的元素排队?