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>

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

这不应该吗

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

只是

这不应该吗

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

只是

我已经更新了问题。我猜你把@input搞错了。html中的notification.text未显示。我已更新问题。我猜你把@input搞错了。html中的notification.text未显示。不注入组件。而是在子对象中创建所有函数（不要使用通知对象），并使用viewchild调用这些函数。检查副本：）也可以使用服务，就像在其他副本中一样。不注入组件。而是在子对象中创建所有函数（不要使用通知对象），并使用viewchild调用这些函数。检查副本：）也可以使用服务，就像其他副本一样。

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

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