Ошибка привязки данных, поскольку переменная не обновляет свое значение - PullRequest
Новая
       27

Ошибка привязки данных, поскольку переменная не обновляет свое значение

0 голосов
/ 26 февраля 2019

У меня есть этот компонент сообщения об ошибках.Он использует привязку данных, чтобы получить его текст, поэтому я просто создал функцию, которая получает в качестве параметра сообщение, которое должно отображаться.Вот идея: 

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

Компонент: 

  message: string = "Something went wrong";

  constructor() { }

  ngOnInit() {
  }

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

Видите ли, message получает свое значение от того, кто его вызывает.Проблема в том, что внутри функции callMessage () значение обновляется, но глобальная переменная не меняется.Я посмотрел это в Интернете и попробовал что-то вроде window.message и window[message], но, похоже, ничего из этого не работает.Я также пытался удалить это исправленное сообщение «Что-то пошло не так», но переменная просто остается нулевой.Я также пытался вызвать функцию из ngOnInit, но без успеха я не могу удалить callMessage () и просто вставить его в ngOnInit, потому что он не принимает параметры.

Это приводит к тому, что компонент сообщениявсегда показывать фиксированное сообщение (или ничего, без него).Самое смешное, что это должно работать.Внутри этого же проекта я сделал много других функций, которые работают, изменяя глобальные значения и передавая их DOM.Но по какой-то причине этот пример кажется неудачным.

Что может быть причиной этого?

примечание: если вам нужен какой-то другой фрагмент кода, пожалуйста, не стесняйтесь сказать это, и просто дляПояснение: callMessage () вызывается в основном ngOnInit веб-приложения

Редактировать: Кто-то попросил декоратор, так что лучше посмотрим: 

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 {

И вот какя называю это: 

ngOnInit() {

  this.toggleSuccess('Test');

}

toggleSuccess(msg: string) {

  this.messagesComponent.callMessage(msg);

}

и, конечно, у меня есть <app-messages></app-messages> в main.html

obs: это отдельные методы, потому что я обычноВызов toggleSuccess из main вместо расширения сообщения до полного проекта (так как mainComponent уже предоставлен)

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Как отметил @Arif в комментариях, ваш подход неверен.

Есть два отдельных случая.То, что отображается, не имеет ничего общего с тем, что предоставляется.

Среди других опций вы можете использовать подход синглтон-сервиса: StackBlitz demo (что является лучшим решением imho).

0 голосов
/ 26 февраля 2019

Ваш подход не верен.Вы не должны внедрять компоненты.

Что вы должны сделать:

Либо - использовать @ViewChild и вызывать его только в или после ngAfterViewInit

Или - создать службу,и используйте ComponentFactoryResolver для динамической вставки представления.

Или - создайте одноэлементную службу (предоставьте в корне), создайте поведение, прослушайте эту тему из компонента ошибки. 

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

Вставьте егона ваш app.component и отправьте сообщение 

constructor(private errorService: ErrorService) {

}

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

И в вашем компоненте app-error сделайте это 

  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'
    });
  }

Примечание: Пожалуйста, перепроверьте мой код для опечаток, так как я пишу это, используямобильный телефон.

...