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

Question

这个问题在这里已有答案：

• Angular 2+ call a function in a child component from its parent component 2回答
• Angular 2 Sibling Component Communication 11个答案

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

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

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

Answer 1

不应该这样吗？

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

只是

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