angular2里component怎么使用全局的样式

angular2里component怎么使用全局的样式,第1张

Web Components 的出现给组件标准化带来了很好的契机: WEB组件目前仍然依靠各种类似"Hack"的方式来模拟,模拟方式也各有不同,很难统一和标准化,而 Web Components 则直接提供了标准化的组件定义方式,这是组件标准化的基石

一般常用的两种是ng-style跟ng-class

1、ng-style

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象,表达式返回的也是对象。

对象由 CSS 属性和值组成,即 key=>value 对。

例如:

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>

var app = angular.module("myApp", [])

app.controller("myCtrl", function($scope) {

$scope.myObj = {

"color" : "white",

"background-color" : "coral",

"font-size" : "60px",

"padding" : "50px"

}

})

</script>

</body>

2、ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

例如:

<select ng-model="home">

<option value="sky">Sky</option>

<option value="tomato">Tomato</option>

</select>

<div ng-class="home">

<h1>Welcome Home!</h1>

<p>I like it!</p>

</div>

angularjs的使用,比较推荐的方法是模块化,即将不同功能或者类似业务内容组成module。其余的如控制器、服务、工厂、配置等等都是创建在对应的module下。使用不同的moduleName.js文件,进行管理和组织,而不是都写在index.html中。angular使用route.js和ng-view切换展现的。所以:其实应该是独立出来的,不应该写在index.html,已经不是原来的形式啦。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11673477.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存