基于ViewChild实现Angular表单显隐切换及Id传参（多标签父页面场景）

Got it, let's break this down step by step since you already know *ngIf is the way to go for showing/hiding elements—we just need to tie in the child form component and handle the ID parameter passing properly. I'll cover two common approaches depending on whether you want a component-only embed or a routed embed (since you mentioned your routing uses hash mode).

Approach 1: Component-Only Embed (Simplest for Tab Context) #

This method directly embeds the form component in your tab content, using @Input() for ID passing and @Output() to trigger the cancel action.

Step 1: Set Up the Parent Tab Component Template #

In your parent component's template, within the "位置" tab section, use *ngIf to toggle between the location list and the form:

<!-- Parent component template - "位置" tab content -->
<div class="tab-pane active" *ngIf="activeTab === 'location'">
  <!-- Location List (visible when form is hidden) -->
  <app-location-list 
    *ngIf="!isFormVisible"
    (onEdit)="openEditForm($event)"
    (onAdd)="openAddForm()">
  </app-location-list>

  <!-- Embedded Child Form (visible when form is shown) -->
  <app-location-form
    *ngIf="isFormVisible"
    [locationId]="selectedLocationId"
    (onCancel)="closeForm()">
  </app-location-form>
</div>

Step 2: Parent Component Logic #

Add properties and methods to manage visibility and ID state in your parent component's TypeScript file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent-tabs',
  templateUrl: './parent-tabs.component.html',
  styleUrls: ['./parent-tabs.component.css']
})
export class ParentTabsComponent {
  activeTab = 'location'; // Set your active tab default
  isFormVisible = false;
  selectedLocationId: number | null = null;

  // Open form for editing (pass the location ID)
  openEditForm(locationId: number) {
    this.selectedLocationId = locationId;
    this.isFormVisible = true;
  }

  // Open form for adding new location (no ID needed)
  openAddForm() {
    this.selectedLocationId = null;
    this.isFormVisible = true;
  }

  // Cancel form: hide it and show the list again
  closeForm() {
    this.isFormVisible = false;
    this.selectedLocationId = null; // Reset ID state
  }
}

Step 3: Child Form Component Setup #

Update your child form component to accept the ID via @Input() and emit a cancel event via @Output():

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

@Component({
  selector: 'app-location-form',
  templateUrl: './location-form.component.html',
  styleUrls: ['./location-form.component.css']
})
export class LocationFormComponent implements OnInit {
  @Input() locationId: number | null = null;
  @Output() onCancel = new EventEmitter<void>();

  ngOnInit(): void {
    // Load location data if editing (use locationId to fetch)
    if (this.locationId) {
      // Example: this.locationService.getLocation(this.locationId).subscribe(...);
    } else {
      // Initialize empty form for new location
    }
  }

  // Trigger cancel event to parent
  handleCancel() {
    this.onCancel.emit();
  }
}

Add the cancel button in your child form template:

<!-- Child form template -->
<button (click)="handleCancel()">取消</button>
<!-- Rest of your form fields -->

Approach 2: Routed Embed (For URL-Accessible Forms) #

If you want the form to be accessible via a URL (even within the tab), you can use Angular's child routing. Since you're using useHash: true, no extra config is needed for hash mode—it works seamlessly.

Step 1: Update Route Configuration #

Add child routes to your app-routing-module.ts for the location form:

const routes: Routes = [
  // Parent tab route
  {
    path: 'parent-tabs',
    component: ParentTabsComponent,
    children: [
      // Child route for edit form (with ID parameter)
      { path: 'location-form/:id', component: LocationFormComponent },
      // Child route for add form (no ID)
      { path: 'location-form', component: LocationFormComponent }
    ]
  },
  // Other routes...
];

export const appRoutingModule = RouterModule.forRoot(routes, { useHash: true });

Step 2: Update Parent Template with <router-outlet> #

Replace the direct component embed with a <router-outlet> in your parent's "位置" tab:

<div class="tab-pane active" *ngIf="activeTab === 'location'">
  <app-location-list 
    *ngIf="!isFormVisible"
    (onEdit)="navigateToEditForm($event)"
    (onAdd)="navigateToAddForm()">
  </app-location-list>

  <!-- Router outlet to load the form component -->
  <router-outlet *ngIf="isFormVisible"></router-outlet>
</div>

Step 3: Parent Component Navigation Logic #

Use Angular's Router to navigate to the form routes:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent-tabs',
  templateUrl: './parent-tabs.component.html',
  styleUrls: ['./parent-tabs.component.css']
})
export class ParentTabsComponent {
  activeTab = 'location';
  isFormVisible = false;

  constructor(private router: Router) {}

  navigateToEditForm(locationId: number) {
    this.isFormVisible = true;
    this.router.navigate(['/parent-tabs/location-form', locationId]);
  }

  navigateToAddForm() {
    this.isFormVisible = true;
    this.router.navigate(['/parent-tabs/location-form']);
  }

  closeForm() {
    this.isFormVisible = false;
    this.router.navigate(['/parent-tabs']); // Navigate back to list view
  }
}

Step 4: Child Form Get ID from Route #

In the child form component, use ActivatedRoute to fetch the ID parameter:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-location-form',
  templateUrl: './location-form.component.html',
  styleUrls: ['./location-form.component.css']
})
export class LocationFormComponent implements OnInit {
  locationId: number | null = null;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    // Get ID from route parameters
    this.route.paramMap.subscribe(params => {
      const idParam = params.get('id');
      this.locationId = idParam ? parseInt(idParam, 10) : null;
      
      // Load data if editing
      if (this.locationId) {
        // this.locationService.getLocation(this.locationId).subscribe(...);
      }
    });
  }

  handleCancel() {
    // Navigate back to parent tab list
    this.router.navigate(['/parent-tabs']);
  }
}

Key Notes #

• Component-only embed: Best for simple tab-based UIs where you don't need direct URL access to the form. It keeps state within the parent component.
• Routed embed: Useful if you want users to bookmark or share the form URL, or if your form has complex routing needs.
• Hash mode (useHash: true) doesn't affect either approach—Angular handles the hash in URLs automatically.

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