Question

我有这个“错误”消息组件。它使用数据绑定来获取其文本，因此我刚刚创建了一个函数，该函数获取应该显示的消息作为参数。这是主意：

<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]之类的方法，但似乎都不起作用。我也尝试过删除该固定消息“出了点问题”，但该变量仍然为null。我也尝试过从ngOnInit调用该函数，但是没有成功，我无法删除callMessage（）并将其粘贴到ngOnInit内，因为它不接受参数。

这将导致消息组件始终显示固定消息（如果没有，则什么也不显示）。有趣的是，这应该可行。在同一项目中，我执行了许多其他功能，这些功能通过更改全局值并将其传递给DOM来起作用。但是由于某种原因，该示例似乎失败了。

可能是什么原因造成的？

注意：如果您需要其他任何代码，请随时声明，为澄清起见，在Web应用程序的主ngOnInit中调用了callMessage（）

编辑：有人要求装饰器，所以外观更好：

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

}

当然，我在main.html

中有一个<app-messages></app-messages>

obs：这些是分开的方法，因为我通常是从main调用toggleSuccess，而不是将消息扩展到整个项目（因为已经提供了mainComponent）

Answer 1

您的方法不正确。您不应该注入组件。

您应该做的是：

可以-使用@ViewChild并仅在ngAfterViewInit或之后调用它

或者-创建一个服务，然后使用ComponentFactoryResolver动态插入视图。

或者-创建一个单例服务（在root中提供），创建一个行为，并从您的错误组件中监听该主题。

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

将其注入您的app.component并发送消息

constructor(private errorService: ErrorService) {

}

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

在您的应用程序错误组件中执行此操作

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

注意：当我使用手机编写代码时，请重新检查我的代码是否有错字。

Answer 2

如@Arif在评论中所述，您的方法是错误的。

有两个单独的实例。显示的内容与提供的内容无关。

在其他选项中，您可以使用单例服务方法：StackBlitz演示（这是最好的解决方案）。

数据绑定失败，因为该变量不会更新其值

2 个答案: