今天完成的事情：昨天没搞懂得管道写法（补齐），任务“分页”卡壳
明天计划的事情：任务分页，一定想办法搞定；
遇到的问题：原计划今天吧分页项搞出来，发现没有那么简单，
。问了师兄才有一点思路，明天搞起来！
收获：
angular 管道知识补缺：
昨天，疑难不知道一个管道文件内怎样写多种方式，还好今天搞出来了：（三种方式写到了一起，再有再多方式也完全可以写下）。方法写着简单，只要是要引进组件内难住了，方法都写在下面：
各管道方式：
import { Pipe, PipeTransform } from '@angular/core';
// 状态管道
@Pipe({
name: 'pipename' // 管道名称，用于引用使用
})
export class PipenamePipe implements PipeTransform {
transform(value: any): any { // 声明数据类型；
return value && value > 1 ? '上线' : '草稿'; // 输出类型
}
}
// 操作管道
@Pipe({
name: 'rap'
})
export class RapPipe implements PipeTransform {
transform(value: any): any {
return value && value > 1 ? '下线' : '上线';
}
}
// 类型管道
@Pipe({
name: 'lei'
})
export class LeiPipe implements PipeTransform {
transform(value: any): any {
switch (value) { // 判断 ;
case 0: return '首页Banner';
case 1: return '找职位Banner';
case 2: return '找精英Banner';
default: return '行业大图';
}
}
}
引进组件的方式：（重要部分）
// 管道文件引入
import { PipenamePipe } from '../../pipe/pipename.pipe';
@Component({
selector: 'app-text',
templateUrl: './text.component.html',
styleUrls: ['./text.component.scss'],
providers: [PipenamePipe] // 管道引进的重要步骤
})
当然在根目录的声明也不能缺少：
// 管道文件引入
import { PipenamePipe } from './pipe/pipename.pipe';
import { RapPipe } from './pipe/pipename.pipe';
import { LeiPipe } from './pipe/pipename.pipe';
import { PaginationComponent } from './pagination/pagination.component';
@NgModule({
//组件
declarations: [
PipenamePipe,
RapPipe,
LeiPipe,
PaginationComponent,
],
这样就是完整的管道方法写法，就可以拿来用在组件中了，例：（昨天的方法太累赘，虽然也实现了。）
<td> {{item.type | lei}} </td
<td> {{item.status | pipename}} </td>
<td> {{item.status | rap}} </td>
JS知识点：
异步操作之定时器：JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。
1，setTimeout（）：setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
setTimeout函数有两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。下面代码实例：
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2
上面代码会先输出1和3，然后等待1000毫秒再输出2。注意，console.log(2)必须以字符串的形式，作为setTimeout的参数。
如果推迟执行的是函数，就直接将函数名，作为setTimeout的参数，如下：
function f() {
console.log(2);
}
setTimeout(f, 1000);
setTimeout的第二个参数如果省略，则默认为0：
setTimeout(f)
// 等同于
setTimeout(f, 0)
setTimeout(function (a, b) {
console.log(a + b);
}, 1000, 3, 1); // a， b 并未定义数值。但返回数值为：4 ；原因如下
上面代码中，setTimeout共有4个参数。最后那两个参数，将在1000毫秒之后回调函数执行时，作为回调函数的参数。
如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象。：代码输出的是1，而不是2。因为当obj.y在1000毫秒后运行时，this所指向的已经不是obj了，而是全局环境。
var x = 1;
var obj = {
x: 2,
y: function () {
console.log(this.x);
}
};
setTimeout(obj.y, 1000) // 1
为避免这种问题：obj.y放在一个匿名函数之中，这使得obj.y在obj的作用域执行，而不是在全局作用域内执行，就够显示正确的值：
setTimeout(function () {
obj.y();
}, 1000);
// 2
还可以使用bind方法，将obj.y这个方法绑定在obj上面：
setTimeout(obj.y.bind(obj), 1000)
// 2
2，setInterval（）：setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
var i = 1
var timer = setInterval(function() {
console.log(2);
}, 1000)
上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。
一个动画实例：
var div = document.getElementById('someDiv');
var opacity = 1;
var fader = setInterval(function() {
opacity -= 0.1;
if (opacity >= 0) {
div.style.opacity = opacity;
} else {
clearInterval(fader);
}
}, 3000);
上面代码每隔3000毫秒，设置一次div元素的透明度，直至其完全透明为止。
3，clearTimeout()，clearInterval()：setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);
clearTimeout(id1);
clearInterval(id2);
上面代码中，回调函数f不会再执行了，因为两个定时器都被取消了。
setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？答案是不会。必须要等到当前脚本的同步任务，全部处理完以后，才会执行setTimeout指定的回调函数f。也就是说，setTimeout(f, 0)会在下一轮事件循环一开始就执行。
setTimeout(function () {
console.log(1);
}, 0);
console.log(2);
// 2
// 1
上面代码先输出2，再输出1。因为2是同步任务，在本轮事件循环执行，而1是下一轮事件循环执行。
setTimeout(f, 0)这种写法的目的是，尽可能早地执行f，但是并不能保证立刻就执行f。
// HTML 代码如下
// <input type="text" id="input-box">
document.getElementById('input-box').onkeypress = function (event) {
this.value = this.value.toUpperCase();
}
上面代码想在用户每次输入文本后，立即将字符转为大写。但是实际上，它只能将本次输入前的字符转为大写，因为浏览器此时还没接收到新的文本，所以this.value取不到最新输入的那个字符。只有用setTimeout改写，上面的代码才能发挥作用。
document.getElementById('input-box').onkeypress = function () {
var self = this;
setTimeout(function () {
self.value = self.value.toUpperCase();
}, 0);
}
上面代码将代码放入setTimeout之中，就能使得它在浏览器接收到文本之后触发。
由于setTimeout(f, 0)实际上意味着，将任务放到浏览器最早可得的空闲时段执行，所以那些计算量大、耗时长的任务，常常会被放到几个小部分，分别放到setTimeout(f, 0)里面执行。
返回列表
评论