如何在Angular中实现视频的条件显示隐藏及产品页视频组件复用

Hey there! Let's break down your two Angular video module challenges step by step—super common use cases, so I've got you covered.

1. Conditionally Show/Hide Video in Angular #

The most straightforward way to handle visibility in Angular is with the *ngIf directive. It’s perfect for toggling elements based on boolean flags, async data, or any truthy/falsy value.

Basic Toggle with a Boolean Flag #

First, define a visibility state in your component class:

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  // Set default state (or populate from API/config)
  showVideoModule: boolean = true;

  // Optional: Add a method to toggle visibility manually
  toggleVideoVisibility() {
    this.showVideoModule = !this.showVideoModule;
  }
}

Then wrap your video module in the template with *ngIf:

<!-- home.component.html -->
<div class="video-module" *ngIf="showVideoModule">
  <video controls>
    <source src="your-home-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Control Based on Async/API Data #

If you’re checking whether a product has a video (from an API response), use the safe navigation operator (?.) to avoid null/undefined errors, or pair *ngIf with the async pipe:

// product.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
  currentProduct: any; // Use a proper interface for type safety in production

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.productService.getProduct(123).subscribe(product => {
      this.currentProduct = product;
    });
  }
}

Template:

<!-- product.component.html -->
<div class="video-module" *ngIf="currentProduct?.videoUrl">
  <video controls>
    <source [src]="currentProduct.videoUrl" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

The ?. ensures we don’t try to access videoUrl before currentProduct loads.

2. Reuse the Video Module Across All Product Pages #

To make the module reusable, create a standalone, input-driven component. It will automatically hide itself if no video data is passed in.

Step 1: Build the Reusable Component #

Generate a new component (via Angular CLI: ng generate component video-display):

// video-display.component.ts
import { Component, Input } from '@angular/core';

// Optional: Define an interface for type safety
interface VideoConfig {
  url: string;
  title?: string;
}

@Component({
  selector: 'app-video-display',
  templateUrl: './video-display.component.html',
  standalone: true, // Use standalone for Angular 14+
  imports: [] // Add CommonModule if using older Angular versions
})
export class VideoDisplayComponent {
  // Accept video data as an input property
  @Input() videoConfig: VideoConfig | undefined;
}

Template (the component handles its own visibility):

<!-- video-display.component.html -->
<div class="video-module" *ngIf="videoConfig?.url">
  <h4 *ngIf="videoConfig.title">{{ videoConfig.title }}</h4>
  <video controls>
    <source [src]="videoConfig.url" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Step 2: Use the Component in Home & Product Pages #

Home Page:

<!-- home.component.html -->
<app-video-display 
  [videoConfig]="{ url: 'home-video.mp4', title: 'Welcome to Our Platform!' }"
></app-video-display>

Product Page:

Handle the video check cleanly in your component class first:

// product.component.ts
get productVideoConfig(): VideoConfig | undefined {
  if (this.currentProduct?.videoUrl) {
    return {
      url: this.currentProduct.videoUrl,
      title: `${this.currentProduct.name} Demo`
    };
  }
  return undefined;
}

Then drop the component into your product template:

<!-- product.component.html -->
<app-video-display [videoConfig]="productVideoConfig"></app-video-display>

If productVideoConfig is undefined, the component’s *ngIf will hide the module automatically.

Bonus: Add a Loading State (Optional) #

For async data, you can add a loading spinner while waiting for video details:

<!-- video-display.component.html -->
<div *ngIf="videoConfig?.url; else loading">
  <!-- Video content here -->
</div>
<ng-template #loading>
  <div class="loading-spinner">Loading video...</div>
</ng-template>

内容的提问来源于stack exchange，提问作者Bogdan