Comment utiliser une fonction dans tous les composants

Version imprimable

Bonjour, mon problème est simple : j'ai une fonction 'addChatWindow(id?: string, thread?: Thread)' instanciée dans mon composant 'ChatWindowsComponent'.
Je voudrais utilisé cette fonction dans une autre classe 'ChatThreadsComponent'.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
export class ChatWindowsComponent implements OnInit {
 
    windows: Box[] = [new Box()];
 
    constructor() {
        this.windows = [
            new Box()
            ];
    }
 
    ngOnInit(): void {    }
 
    addChatWindow(id?: string, thread?: Thread): void {
        this.windows.push(new Box());
    }
}

Code:

1
2
3
4
5
6
 
export class ChatThreadsComponent implements OnInit {
 
    onCreateChatWindow(id?: string): void {
      addChatWindow(this.thread.id, this.thread);        ?????????????
}

Merci d'avance :)

13/07/2017, 19h33
pterrat

Bonjour,

Dans ton exemple, et pour utiliser une fonction que tu vas réutiliser plusieurs fois dans ton application. Je te conseille de rattacher cette fonction à un service. Tu instancies ton service dans tes composants et tu utilises cette fonction.

Ps: tu peux aussi rattacher des fonctions à des models mais ce n'est pas adapté à ton cas selon moi

Merci de ta réponse :)
Voici ce que j'ai fait. Est ce bien comme cela qu'il faut faire pour instancier un service, car cela ne fonctionne pas et je ne comprends pas pourquoi ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject, Observable } from 'rxjs';
import { Box } from './box.model';
 
@Injectable()
export class BoxService {
 
    windows: Box[];
 
    constructor() {    }
 
    addBox(box: Box): void {
        this.windows.push(new Box());
    }
}
 
export const boxsServiceInjectables: Array<any> = [
    BoxService
];

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import { uuid } from '../util/uuid';
 
export class Box {
    id: string;
    thread: Thread;
 
    constructor(id?: string,
                thread?: Thread) {
        this.id = id || uuid();
        this.thread = thread || null;
    }
}

Faut-il initialiser windows dans le constructeur de mon service et non plus dans mon composant 'Chat-windows' ?

Merci de votre aide ...

Quelle erreur as-tu quand tu appelles ton service?

Je pense que tu dois déclarer ton window dans le composant.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
@Injectable()
export class BoxService {
 
 
 
    constructor() {    }
 
    addBox(windows: Box[], box: Box): Box[]{
        windows.push(new Box());
        return windows as Box[];
 
    }
}

Merci pour ton aide !! C'est bon cela fonctionne même en laissant la variable windows initialisé dans le service. Il fallait que j'initialise ensuite windows dans mon composant comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
export class ChatWindowsComponent implements OnInit {
    windows: Box[];
 
    constructor(public boxService: BoxService) {
    }
 
    ngOnInit(): void {
        this.windows = this.boxService.windows;
    }
}

J'ai juste un problème mais je ne sais pas trop d'où cela vient. Lorsque je crée une fenêtre de discussion avec addChatWindow, les fenêtres déjà ouvertes changent elles aussi de destinataire. Il m'est impossible d'avoir 2 fenêtres avec 2 destinataires différents d'ouvertes.
Est ce dût à l'initialisation le service ?

Voici mes codes pour plus d'explication :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
export class ChatThreadComponent implements OnInit{
  @Input() thread: Thread;
  selected = false;
  currentThread: Thread;
  currentBox: Box;
 
  constructor(public threadsService: ThreadsService,
              public boxService: BoxService) {
  }
 
  ngOnInit(): void {
    this.threadsService.currentThread
        .subscribe((currentThread: Thread) => {
          this.selected = currentThread &&
              this.thread &&
              (currentThread.id === this.thread.id);
        });
  }
 
  clicked(id?: string, thread?: Thread): void {
    this.boxService.addChatWindow(id, thread);
    this.threadsService.setCurrentThread(thread);
  }
}

Code:

1
2
3
4
5
6
7
8
9
 
@Injectable()
export class ThreadsService {
  constructor(public messagesService: MessagesService) {
          }
 
  setCurrentThread(newThread?: Thread): void {
    this.currentThread.next(newThread);
  }

Code:

1
2
3
4
5
6
7
 
<div class="chat-window-container">
    <div *ngFor="let box of windows; let i=index;">
        <chat-window *ngIf = "i<3">
        </chat-window>
    </div>
</div>