GetDocumentByElementId返回Null且通知不显示及组件显示属性问题

Hey there! Let's work through your two notification component issues step by step—both relate to proper Angular DOM handling and component state management, so we can fix them with Angular-native practices instead of raw DOM hacks.

Issue 1: document.getElementById("notification") Returns Null #

The main reasons this happens are either timing issues (the element isn't rendered yet when you try to grab it) or that you're bypassing Angular's component abstraction with raw DOM calls. Here's how to fix it properly:

Why it breaks: #

• If your notification element is wrapped in an *ngIf, it won't exist in the DOM until the condition is true—so ngAfterViewInit might run before the element is rendered.
• Direct document.getElementById calls ignore Angular's component scope, which is fragile especially if you have multiple instances of the notification component.

Fix with Angular's @ViewChild: #

1. First, add a template reference variable to your notification element in the component's template:

<div #notificationEl class="notification">
  {{ message }}
</div>

2. In your component class, use @ViewChild to safely access the element (this respects Angular's lifecycle and component scope):

import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnChanges } from '@angular/core';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})
export class NotificationComponent implements AfterViewInit, OnChanges {
  @Input() type: string;
  @Input() message: string;
  @Input() timeout: number = 3000; // Add default value to avoid undefined
  @Input() display: boolean = false; // Default to hidden

  @ViewChild('notificationEl') notificationEl!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    // Now we can safely access the element without null errors
    this.updateNotificationDisplay();
  }

  // Update display whenever input values change
  ngOnChanges(): void {
    this.updateNotificationDisplay();
  }

  private updateNotificationDisplay(): void {
    if (this.notificationEl) {
      this.notificationEl.nativeElement.style.display = this.display ? 'block' : 'none';
    }
  }
}

Issue 2: Avoid Empty Divs When Notification Isn't Active #

Using an @Input() display is a start, but directly toggling style.display leaves the div in the DOM (taking up space if your CSS has margins/padding). A cleaner solution is to use Angular's *ngIf to remove the element entirely when it's not needed.

Better Approach with *ngIf: #

1. Update your template to use *ngIf to conditionally render the notification. You can even combine it with your existing inputs to determine when to show it:

<!-- Only renders the div if display is true AND we have a valid message/type -->
<div *ngIf="display && message && type" class="notification" [ngClass]="type">
  {{ message }}
</div>

2. Adjust your component to handle automatic timeout (if needed) with proper change detection:

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

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})
export class NotificationComponent implements OnInit {
  @Input() type: string;
  @Input() message: string;
  @Input() timeout: number = 3000;
  @Input() display: boolean = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    // Auto-hide after timeout if display is initially true
    if (this.display) {
      setTimeout(() => {
        this.display = false;
        // Trigger change detection if using OnPush strategy
        this.cdr.detectChanges();
      }, this.timeout);
    }
  }
}

Key Benefits: #

• No empty div cluttering the DOM when the notification is hidden.
• Leverages Angular's built-in directives instead of manual DOM manipulation.
• Clearer component logic that's easier to debug and maintain.

Quick Bonus Tip #

Avoid using any for your input types—define specific types (like string for type/message, number for timeout, boolean for display) to catch errors early and improve code quality.

内容的提问来源于stack exchange，提问作者Haq.H