Discussion :

[bzh.floriane]

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 :

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
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 :

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

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

Merci d'avance

[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

[bzh.floriane]

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 :

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
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 :

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

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

[pterrat]

Quelle erreur as-tu quand tu appelles ton service?

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

Code :

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

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[];
 
    }
}

[bzh.floriane]

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 :

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

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 :

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
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 :

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

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 :

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

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>