扩展Component实现模板切换
ionic2的模板,默认会被全部打包到www\build\main.js里,导致单文件过大。且无法实现按用户切换不同的模板。
默认Component装饰器写法
@Component(
{
templateUrl: 'tabs.html'
})
ionic2的模板,默认会被全部打包到www\build\main.js里,导致单文件过大。且无法实现按用户切换不同的模板。
默认Component装饰器写法
@Component(
{
templateUrl: 'tabs.html'
})
第一种不存入数据库,临时运算
[DisplayName("字段")]
public double CoalNum;
private double _SO2;
[DisplayName("SO2"),NonPersistent]
public double SO2 {
get { return _SO2; }
set {
_SO2 = (CoalNum * 0.012 * 0.8 * 2);
}
}
第二种字段存入数据库;但是运算过后数据会延迟存入数据库
[DisplayName("字段")]
public double CoalNum;
private double _SO2;
[DisplayName("SO2")]
public double SO2 {
get { return _SO2 = (CoalNum * 0.012 * 0.8 * 2); }
}
第三种都同时存入数据库
[DisplayName("字段")]
public double CoalNum;
[DisplayName("SO2")]
public double SO2;
protected override void OnSaving(){
SO2 = (CoalNum * 0.012 * 0.8 * 2);
}
4.继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
1.文件后缀名
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body{
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
2.导入
sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。
被导入sass文件a.scss:
//a.scss
//-------------------------------
body {
background: #eee;
}
需要导入样式的sass文件b.scss:
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
转译出来的b.css样式:
@import "reset.css";
body{
background: #eee;
}
p{
background: #0982c1;
}
根据上面的代码可以看出,b.scss编译后,reset.css继续保持import的方式,而a.scss则被整合进来了
3.嵌套(Nesting)
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。在选择器嵌套中,可以使用&表示父元素选择器。
//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。
//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
当然这只是个属性嵌套的例子,如果实际这样使用,那估计得疯掉
1、装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。必须要启用。
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
2、装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用@expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。
3、TypeScript支持为带有装饰器的声明生成元数据。 你需要在命令行或 tsconfig.json里启用emitDecoratorMetadata编译器选项。
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
4、模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一
导出:
class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator };
导入:
import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();
可以对导入内容重命名
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";let myValidator = new ZCV();