Angular 的 console.log 函数

Muhammad Adil 2022年4月20日
Angular 的 console.log 函数

本文将讨论 Angular console.log 的完整概念。

Angular 中的 console.log 函数

console.log 是一个 JavaScript 函数,用于将消息记录到开发者控制台或浏览器控制台到网页。

此方法通过告知 Angular 开发人员有关错误、警告以及代码执行期间发生的情况来帮助他们。

它用于调试 Angular 应用程序、识别性能问题以及解决第三方库或其他依赖项的问题。

我们可以通过在任何浏览器上打开开发人员工具并导航到控制台选项卡来访问此功能。我们也可以在 Android Studio 的 View > Tool Windows > Other > Console 中找到它。

console.log 消息总是用时间戳、级别和括号内的消息写入。该消息将取决于日志的类型。

级别可以是以下之一。

  • Debug:这是出于调试目的,应尽可能避免。
  • Error:发生运行时错误,将停止执行你的代码,直到你修复它。
  • Info:这是为了提供信息,不会停止你的代码的执行。

在使用 console.log 编写代码之前,我们必须首先通过在终端中键入以下命令来创建一个新的 Angular 项目。

ng new my-project
cd my-project
ng serve

接下来,我们打开浏览器并转到 http://localhost:4200/,在那里我们将看到一个空白屏幕。

现在,让我们在 Angular 中使用 console.log 编写一些代码。

TypeScript 代码:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent{
    console = console;
}

HTML 代码:

<h2>Example of Angular Console log</h2>
<p>
    press F12 and then run the code
</p>

{{ console.error('It will show up an error') }}
{{ console.log('It will show up logging') }}

点击这里查看上面代码的演示。

作者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook