Angular2中loglevel的使用教程

大三的PHP课上，老师现场找bug，一边找一边给我们说，大家以后可以用alert()这个函数来帮助调程序，于是养成了想查看某个值的时候就alert一下的习惯，but！事实上，工程上更多的使用的是log的方式，一般用console.log()，但是缺点是，不能对log们进行筛选，于是有了各种log的轮子，loglevel是一种根据log等级来方便使用log的包，还配备有各种插件，本文先不说插件，主要是介绍一下loglevel的使用，以及踩过的坑。

loglevel的GitHub地址请戳：https://github.com/pimterry/loglevel

 

安装loglevel

 

 

npm install loglevel

 

使用loglevel

 

 

这里没有那种在app.module.ts等各种地方import的步骤，直接在要用loglevel的地方import进来就可以。

在app.component.ts文件中，我们通过 getLogger()函数 得到了一个log对象logger，这个对象的名字为applogger，此后在其他地方只要log.getLogger("applogger")得到的对象都是这一个叫applogger的，也就是说一个log对象对应一个名字，这样我们可以通过setLevel(level)函数很方便的在项目其他地方跨component地修改log的级别。

setLevel(level)函数 是用来设置log的级别的，它使得被设置的log只能显示出来高于参数级别的级别的log。setLevel(level)有一个参数，参数为log的级别，可以是数字也可以是代表级别字符串，但是要注意，只是看起来形式是数字和字符串，实际类型并不是这样，因此不能用数字类型的变量作为函数参数，同理也不能用字符串类型的变量作为函数参数。例：setLevel("trace")，setLevel(3)。

log的级别是这样的，0：trace，1：debug，2：info，3：warn，4：error，5：silent。

通过 getLevel()函数 我们可以得到log的等级。

 

import { Component } from '@angular/core';
import * as log from 'loglevel';
export const logger=log.getLogger("applogger");
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {

 logger.setLevel(3);
    //put initialization logic
  }
}
    //put initialization logic
  }
}

在这里，我们对app.component.ts中的设置做了一下测试：

heroes.component.ts

 

import { Component, OnInit } from "@angular/core";
import * as log from 'loglevel';
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  mylogger:any;
  ngOnInit() {
    this.mylogger=log.getLogger("applogger");
    this.testLog();
  }
  testLog(){
    console.log(logger.getLevel());
  }
  clickTestLog(){		
 console.log(this.mylogger.getLevel()+"clickTestLog");
 this.mylogger.trace("trace works");
 this.mylogger.debug("debug works");
 this.mylogger.info("info works");
 this.mylogger.warn("warn works");
 this.mylogger.error("error works");
 console.log(this.mylogger.getLevel());
} console.log(this.mylogger.getLevel()+"clickTestLog");
 this.mylogger.trace("trace works");
 this.mylogger.debug("debug works");
 this.mylogger.info("info works");
 this.mylogger.warn("warn works");
 this.mylogger.error("error works");
 console.log(this.mylogger.getLevel());
}

别忘了在app.module.ts中declare一下HerosComponent，此处涉及angular基础，具体不展开讨论，不怎么明白的请参照angular2的官方教程 https://angular.io/guide/quickstart

 

 declarations: [
    AppComponent,
    HeroesComponent
  ]

heroes.component.html  没有装bootstrap的童鞋可能看不到按钮的css效果

 

<button class="btn btn-priamry" (click)="clickTestLog()">test</button>

 

可以看到网页上控制台的输出情况如下：

在上面在官方document里面，还有几个函数，在这里大概说一下。

enableAll()函数，使所有级别的log都显示出来，和把级别设为trace是一样的。

disableAll()函数，使所有级别的log都不显示出来，和把级别设为silent是一样的。

setDefaultLevel()函数，目前没怎么用过，顾名思义，设置一个默认的级别，也就是说，如果默认级别为3，后面有个地方把级别设为5了，当前页面与subsequent的页面都为5，但刷新一下，就又回到3了。

 

 

踩过的坑

 

其实如果只是用一两次，直接log.warn  .error什么的都可以，但是别急着高兴终于省事了，看了上面的例子，大家肯定会疑惑，干嘛好好地写两个测试函数，一个放在ngOnInit中，一个通过button点击事件来调用，最开始我就是直接用从import那儿拿来的log直接用，各种log.warn()这样的，但是我发现，放在ngOnInit中的函数调用测试函数测试log等级得到的是我在app.component.ts中设置的那个等级，但是通过button点击调用的测试函数，显示log的等级却是2，可是我的代码里没有任何地方set了log的等级为2，目前原因尚不明确，所以为了可靠，大家尽量通过getLogger函数获取一个新的log来使用，就像上面例子演示的那样。