时间戳

首页 > 解决方案 > 创建组件并在应用程序中的每个位置使用时通知文本消息不起作用

angular - 创建组件并在应用程序中的每个位置使用时通知文本消息不起作用

问题描述

我创建了一个组件，如下所示。该组件将显示通知，但由于某些问题，组件内容未显示。无法弄清楚我错过了什么。

import { Component, OnInit, Input } from '@angular/core';

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

  notification = {
    text: '',
    timeoutLimit: 7000,
    serviceErrorTimeoutLimit: 10000,
    normalTimeoutLimit: 7000,
    assignedToTimeout: {},
    isServiceError: false,
    error(message: string) {
      this.show('#bd362f', message);
    },
    serviceError(message: string) {
      this.isServiceError = true;
      this.timeoutLimit = this.serviceErrorTimeoutLimit;
      this.show('#bd362f', message);
    },
    success(message: string) {
      this.show('#16ad14', message);
    },
    info(message: string) {
      this.show('#278ac3', message);
    },
    warning(message: string) {
      this.show('#e0af00', message);
    },
    show(color: string, message: string) {
      this.text = message;
      this.toggled;
      clearTimeout(this.assignedToTimeout);
      document.getElementById('notificationPopup').style.backgroundColor = color;
      document.getElementById('notificationPopup').style.display = 'block';
      this.assignedToTimeout = setTimeout(() => {
        this.clear();
      }, this.timeoutLimit);
    },
    clear() {
      document.getElementById('notificationPopup').style.display = 'none';
      this.isServiceError = false;
      this.timeoutLimit = this.normalTimeoutLimit;
    }
  };

  constructor() {}

  ngOnInit() {}
}

HTML是：

 <div class="notification-popup" id="notificationPopup">
  <span>{{ notification.text }}</span>
</div>

我在 header.component.html 中使用

<app-notification></app-notification>

header.component.ts

import { NotificationComponent } from '../common/components/notification/notification.component';

constructor(
    private notification: NotificationComponent
  ) {
    //   this.productCodesList=this.productCodesList1;
    this.selectedProductCode == '20201';
    //   this.productCodesList=this.productCodesList1;
    this.vehicleTypeList = this.twoWheelertype;
    this.selectedType = 'KFZK120';
    this.getVehicleMake();
  }

this.notification.notification.success('Data is deleted');

现在弹出通知出现但不显示文本“数据已删除”。

标签： angularcomponents

解决方案

不应该这样吗？

<app-notification [(toggled)]="username"></app-notification>

只是

<app-notification [toggled]="username"></app-notification>

推荐阅读