Discussion :

[bzh.floriane]

Bonjour, malgré mes nombreuses recherches sur votre site et internet, je ne trouve pas ce que je recherche. Je veux créer une variable globale avec TypeScript et sous Angular 4, et ensuite pouvoir utiliser cette variable sur ma console.

Je m'explique: j'ai créé une interface 'MyGlobal', où j'ai créé ma variable 'message_chat' :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
import {ChatService} from "./chat-service/chat.service";
 
export interface MyGlobal {
 
  message_chat: ChatService;
 
}

Je souhaite initialiser cette variable dans mon service 'ChatService'. Je veux que cette variable prenne la valeur de 'this"':

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Injectable } from '@angular/core';
import { MyGlobal } from '../my-global';
 
@Injectable()
export class ChatService implements MyGlobal {
 
  message_chat: ChatService;
 
  constructor(public threadService: ThreadService,
              public messageService: MessageService) {
    this.message_chat = this;
  }
}
Export const chatService Injectables: Array <any> = [
 ChatService
];

Lorsque j'essaie d'utiliser cette variable dans ma console, j'ai cette erreur:

Message_chat.openThread ()

VM140: 1 Uncaught ReferenceError: message_chat n'est pas défini
À <anonyme>: 1: 1

Merci d'avance

[Marco46]

C'est parce que ta variable appartient à l'instance du service ChatService qui appartient elle-même à l'injecteur correspondant.

En AngularJS on peut accéder aux variables exposées par les services de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
angular.element(document.body).injector().get('serviceName');

Tu dois pouvoir faire quelque chose d'équivalent avec Angular, reste à trouver la bonne commande

Tips : En AngularJS il n'y a qu'un seul injector pour toute l'application. En Angular ce n'est plus le cas, il y a plusieurs injector (un par module de mémoire). Ça sera donc probablement moins facile à réaliser mais je vois pas pourquoi ça serait pas possible.

Il faut également prendre en compte la transpilation du typescript vers le vanilla javascript.

[bzh.floriane]

Bonjour, j'ai trouvé une solution je pense assez similaire qui sert principalement à debugger.

Il faut sélectionner le composant avec les dev tools de chrome, et ensuite taper ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ng.probe($0).componentInstance.nomService.__proto__.nomFonction()

Penses-tu que cela est pareil ?

[Marco46]

Je ne sais pas, tu récupères la valeur que tu souhaitais ?

[bzh.floriane]

Pas vraiment, certaines fonctions fonctionnent comme celle-ci car elles sont simples :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
openSettings(): void {
    document.getElementById('outside').style.display = 'block';
    document.getElementById('chat-threads').classList.toggle('display-settings');
  }

Mais d'autres fonctions ne fonctionnent pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
getThreadFromSubscription(threadId: string): Thread {
 
    let foundThread: Thread = null;
 
    this.threads.map((threadDictionary: { [key: string]: Thread }) => {
      for (let key in threadDictionary) {
        if (threadDictionary[key].id == threadId)
          foundThread = threadDictionary[key];
      }
    });
 
    return foundThread;
}

Cela me met ce ci comme erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Uncaught TypeError: Cannot read property 'map' of undefined

J'ai l'impression qu'elle ne connait pas les variables que j'initialise dans mon projet ..

[Biomega]

Tu peux déclarer une variable globale dans main.ts ;

Du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

declare var global: any;

et si simplement ta du mal a débuggé .

Dans le debugger de chrome tu fais .
ctrl+P tu cherche ton component,services,pipes,etc . tu met un breakpoint et tu utilise le this comme dans une classe

l'extension chrome Augury marche relativement bien aussi