console.log无法在Angular2组件(Typescript)中工作

Question

我对Angular2和打字稿都比较新.由于打字稿是javascript的超集,我希望函数console.log能够工作.console.log在.ts组件类之外的文件中完美地工作,但是不能像我期望的那样在组件类中工作.

// main.ts

import { Component } from '@angular/core';
console.log("Hello1"); //1. This works perfectly

@Component({..)
export class App {
 s: string = "Hello2";
 // console.log(s); //2. This gives compilation error (when uncommented)
 // Error: Function implementation is missing or not immediately following the declaration.
}

有什么我想念的吗？

Answer 1

它不起作用因为console.log()它不在"App"类的"可执行区域"中.

类是由属性和方法组成的结构.

让代码执行的唯一方法就是将它放在一个将要执行的方法中.例如:constructor()

console.log('It works here')

@Component({..)
export class App {
 s: string = "Hello2";
            
  constructor() {
    console.log(this.s)            
  }            
}

将类视为普通的javascript对象.

期望这个有用吗？

class:  {
  s: string,
  console.log(s)
 }

如果您仍然不确定,请尝试使用typescript playground,在那里您可以看到生成的普通javascript中的打字稿代码.

https://www.typescriptlang.org/play/index.html

Answer 2

本console.log应被包裹在一个函数,每个类别的"默认"的功能是它constructor所以应该有声明.

import { Component } from '@angular/core';
console.log("Hello1");

 @Component({
  selector: 'hello-console',
})
    export class App {
     s: string = "Hello2";
    constructor(){
     console.log(s); 
    }

}