如何在Angular 2中的模块的所有html模板中提供相同的样式?

时间:2016-12-09 03:48:29

标签: javascript html css angular

  1. 要在Angular 2中设置SPA的全局样式,我们可以将css链接放在index.html文件中。
  2. 要为单个组件设置样式,我们可以在样式或styleUrls中为每个组件的Component Decorator函数添加样式。
  3. 我们也可以通过在不同组件中导入常见的.css文件,为不同的组件提供类似的样式。
  4. 我的应用中有多个NgModule。我想要做的是使用一个通用的样式,将模块应用。

    例如:Module1的module1.css和Module2的Module2.css,而不必在每个组件中导入css。

1 个答案:

答案 0 :(得分:0)

每个ngModule中都应该有一个顶级组件,将module1.css,module2.css ...应用到每个顶级组件的css都可以解决问题。

e.g。假设下面的组件@Entity public class Quiz { private SimpleStringProperty name = new SimpleStringProperty(); private int quiz_id; private List<Task> taskList; public Quiz() { } public Quiz(String name) { this.name.set(name); taskList = new ArrayList<>(); } public Quiz(String name , List<Task> taskList) { this.name.set(name); this.taskList = taskList; } @Column(nullable = false) public String getName() { return name.get(); } public SimpleStringProperty nameProperty() { return name; } public void setName(String name) { this.name.set(name); } @Id @GenericGenerator(name="id" , strategy="increment") @GeneratedValue(generator="id") public int getQuiz_id() { return quiz_id; } public void setQuiz_id(int quiz_id) { this.quiz_id = quiz_id; } @OneToMany(orphanRemoval = true) public List<Task> getTasksList() { return taskList; } public void setTasksList(List<Task> taskList) { this.taskList = taskList; } } 是module1中的顶级组件。

app-root