Mam tego składnika wiadomości "błędów". Wykorzystuje wiązanie danych, aby uzyskać swój tekst, więc właśnie stworzyłem funkcję, która otrzymuje parametr komunikat, który powinien pokazać. To jest pomysł:

<div id="success"> {{message}} </div>

Składnik:

  message: string = "Something went wrong";

  constructor() { }

  ngOnInit() {
  }

  callMessage(msg: string) {
    this.message= msg;
    $("#success").animate({
      'top': '10px'
    });
  }

Widzisz, message otrzymuje swoją wartość od tego, kto ją dzwoni. Problem polega na tym, że w funkcji CallMessage (), wartość zostanie zaktualizowana, ale globalna zmienna nie zmieniają się. Spojrzałem na to w sieci i próbowałem takich jak window.message i window[message], nie wydaje się działać. Próbowałem również usunięciu tej stałej wiadomości "coś poszło nie tak", ale zmienna pozostaje null. Próbowałem również zadzwonić do funkcji z Ngoninit, ale bez powodzenia nie mogę usunąć callmessage () i po prostu wklejaj go wewnątrz Ngoninit, ponieważ nie akceptuje parametrów.

Powoduje to, że składnik wiadomości zawsze pokazuje stały komunikat (lub nic, bez niego). Zabawna rzecz jest taka, że to powinno działać. W tym samym projekcie wykonałem wiele innych funkcji, które działają, zmieniając globalne wartości, a przekazuje go T the Dom. Ale z jakiegoś powodu ten przykład wydaje się zawieść.

Co może być tego przyczyną?

Uwaga: Jeśli potrzebujesz jakiegokolwiek innego kodu, prosimy o to mówić, a tylko do wyjaśnienia, CallMessage () jest wywoływana w głównym ngoninie aplikacji internetowej

Edytuj: Ktoś zapytał o dekorator, więc oto lepszy wygląd:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css'],
  providers: [MessagesComponent]
})
export class MessagesComponent implements OnInit {

I tak wzywam:

ngOnInit() {

  this.toggleSuccess('Test');

}

toggleSuccess(msg: string) {

  this.messagesComponent.callMessage(msg);

}

I oczywiście mam <app-messages></app-messages> w Main.html

Obs: Te są one oddzielone metodami, ponieważ zazwyczaj dzwonią do Togglesuccess z głównego, zamiast rozszerzyć wiadomość do pełnego projektu (ponieważ mainchronizowany jest już dostarczany)

0
CH4B 26 luty 2019, 15:52

2 odpowiedzi

Najlepsza odpowiedź

Jak @arif stwierdził w uwagach, twoje podejście jest złe.

Istnieją dwa oddzielne instancje. Wyświetlane jest nic wspólnego z tym, co jest dostarczane.

Wśród innych opcji można użyć podejścia Singleton Service: Stackblitz Demo (który jest najlepszym rozwiązaniem Imho ).

1
Bardr 26 luty 2019, 14:36

Twoje podejście jest nieprawidłowe. Nie powinieneś wstawiać elementów.

Co powinieneś zrobić:

Albo - użyj @Viewchild i zadzwoń tylko w lub po ngafterviewinit

Lub - Utwórz usługę i użyj ComponentFactoryResolver, aby dynamicznie wstawić.

Lub - Utwórz usługę Singleton (podaj w root), utwórz zachowanie, słuchaj tego tematu komponentu błędu.

@Injectable({
    provideIn: 'root'
})
export class ErrorService {
    public error = new BehaviourSubject(null);
}

Wstrzyknąć go do app.comPonent i wyślij wiadomość

constructor(private errorService: ErrorService) {

}

ngAfterViewInit() {
    this.errorService.error.next('Your message');
}

W komponencie o błędzie aplikacji

  message: string = "Something went wrong";

  constructor(private errorService: ErrorService) { }

  ngOnInit() {
    this.errorService.error.subscribe(error => {
      if (error !== null) {
        this.callMessage(error);
      }
    })
  }

  callMessage(msg: string) {
    this.message= msg;
    $("#success").animate({
      'top': '10px'
    });
  }

Uwaga: Sprawdź ponownie mój kod literowy, gdy piszę ten za pomocą telefonu komórkowego.

1
Arif 26 luty 2019, 13:56