web-dev-qa-db-fra.com

console.log ne fonctionne pas dans le composant Angular2 (TypeScript)

Je suis relativement nouveau sur Angular2 et TypeScript. Puisque TypeScript est un sur-ensemble de javascript, des fonctions telles que console.log devraient fonctionner. console.log fonctionne parfaitement dans les fichiers .ts lorsque vous vous trouvez en dehors d'une classe de composant, mais ne fonctionne pas comme prévu de l'intérieur de la classe de composant.

// 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.
}

Y a-t-il quelque chose qui me manque?

typescriptangular
24
Pranjal Mittal

Cela ne fonctionne pas parce que console.log () n'est pas dans une "zone exécutable" de la classe "App".

Une classe est une structure composée d'attributs et de méthodes.

La seule façon d’exécuter votre code est de le placer dans une méthode à exécuter. Par exemple: constructeur ()

console.log('It works here')

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

Pensez à la classe comme un objet javascript simple.

Serait-il logique de s'attendre à ce que cela fonctionne?

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

Si vous avez encore des doutes, essayez le terrain de jeu TypeScript où vous pouvez voir votre code TypeScript généré en JavaScript.

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

48
Daniel Pliscki

Le console.log doit être encapsulé dans une fonction. La fonction "par défaut" de chaque classe est sa constructor.

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

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

}
6
selem mn

Essayez également de mettre à jour votre navigateur car Angular a besoin du dernier navigateur . Vérifier: https://angular.io/guide/browser-support

J'ai corrigé le problème console.log après la mise à jour du dernier navigateur.

0
Girish