Shulou(Shulou.com)06/03 Report--

Angular+Service how to improve the log function, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Improve the usage of logs in Angular applications

Angular is a very popular development framework, front-end developers like to use console to debug their code in their applications, but due to the need for continuous delivery / deployment, the debug code will be deleted and will not enter the production release environment. [recommended for related tutorials: "angular tutorial"]

Let Angular help us achieve this function.

Angular provides us with the ability to register Services in the application, so that we can reuse some functions in the component.

Therefore, we can improve logging capabilities by using Service to manage our console output.

1: use Service to manage console

Import {Injectable} from'@ angular/core';@Injectable ({providedIn: 'root'}) export class LogService {constructor () {} trace (... data: any []): void {console.trace (data);} log (. Data: any []): void {console.log (data);}}

Use it in the AppComponent component:

LogService.log ('console executed from AppComponent')

The above code is easy to understand, but there is a problem. We cannot know which component of the application the log is printed in, unless we indicate in the log message, for example, the log information in the figure indicates that it comes from the AppComponent component, and we want the right side of the log to automatically indicate which component it comes from, rather than defining the file bit log.service.ts:xx of the entire log system. And there is no need for us to indicate it manually in the log message.

1.1Use logService.trace ()

It can be used to track the source of the log, which looks good, but in fact it adds some unnecessary logging.

2: logService enhanced version

Import {Injectable} from'@ angular/core';@Injectable ({providedIn: 'root'}) export class LogService {constructor () {} trace (source: string,... data: any []): void {console.trace (data);} log (source: string,... data: any []): void {console.log (data);}}

Compared to the previous, the methods of the enhanced logService class receive additional parameters.

LogService.log ('AppComponent','console executed from AppComponent')

After reading the above, have you mastered how Angular+Service can improve the logging function? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.