如何在Angular 4中以父子组件形式使用Bootstrap nav-tabs并传值

Got it, let's figure out how to pass data from your parent tab component to all those child components you've set up. There are two reliable approaches for this in Angular, depending on your needs:

This is the most straightforward approach when you just need to pass static or one-time updated data from parent to children.

Step 1: Define your data in the parent component #

In your parent component's .ts file, declare the data you want to share (I'll use candidate-related data as an example):

// parent component .ts file
export class CandidateTabsComponent {
  // Your existing id variable
  public id: number | null = 123;
  // Example candidate data to pass down
  public candidateDetails = {
    name: "Jane Smith",
    email: "jane.smith@example.com",
    phone: "+1-555-1234"
  };
}

Step 2: Bind the data to each child component in the parent template #

Update your parent HTML template to pass the data via input properties to every child component:

<section class="section_custom">
  <div class="container-fluid">
    <div class="card card-nav-tabs">
      <div class="card-header card-header-white">
        <div class="nav-tabs-navigation">
          <div class="nav-tabs-wrapper pull-right">
            <ul class="nav nav-tabs" data-tabs="tabs">
              <li class="nav-item">
                <a class="nav-link active" href="#details" data-toggle="tab">Candidate Details</a>
              </li>
              <li class="nav-item">
                <a [class]="id==null ?'nav-link disabled':'nav-link'" href="#profile" data-toggle="tab">Public Profile</a>
              </li>
              <li class="nav-item">
                <a [class]="id==null ?'nav-link disabled':'nav-link'" href="#login" data-toggle="tab">Account Settings</a>
              </li>
              <li class="nav-item">
                <a [class]="id==null ?'nav-link disabled':'nav-link'" href="#videos" data-toggle="tab">Videos</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="tab-content">
          <div class="tab-pane active" id="details">
            <!-- Pass data to child component -->
            <app-candidate-edit [candidateId]="id" [candidateData]="candidateDetails"></app-candidate-edit>
          </div>
          <div class="tab-pane" id="profile">
            <app-candidate-profile [candidateId]="id" [candidateData]="candidateDetails"></app-candidate-profile>
          </div>
          <div class="tab-pane" id="login">
            <app-candidate-login [candidateId]="id"></app-candidate-login>
          </div>
          <div class="tab-pane" id="videos">
            <app-candidate-video-list [candidateId]="id"></app-candidate-video-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 3: Receive the data in each child component #

In each child component's .ts file, use the @Input() decorator to accept the passed data:

// Example: app-candidate-edit.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-candidate-edit',
  templateUrl: './candidate-edit.component.html',
  styleUrls: ['./candidate-edit.component.css']
})
export class CandidateEditComponent {
  // Receive candidate ID from parent
  @Input() candidateId!: number | null;
  // Receive candidate data from parent (use a proper interface instead of `any` for type safety)
  @Input() candidateData!: any;
}

Repeat this pattern for all your child components, adjusting the input properties to match what each component needs.

Use this approach if your data needs to update dynamically, or if you want to share data across multiple components beyond just the parent and its direct children.

Step 1: Create a shared data service #

Generate a service using Angular CLI:

ng generate service candidate/CandidateData

Then update the service to hold and emit your data:

// candidate-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

// Define a type for your candidate data (type safety is key!)
export interface Candidate {
  id: number | null;
  name: string;
  email: string;
  phone?: string;
}

@Injectable({
  providedIn: 'root' // Makes the service available app-wide
})
export class CandidateDataService {
  // BehaviorSubject holds the current value and emits it to new subscribers
  private candidateSubject = new BehaviorSubject<Candidate>({ id: null, name: '', email: '' });
  // Expose an observable so components can subscribe to data changes
  public candidate$: Observable<Candidate> = this.candidateSubject.asObservable();

  // Method to update the data (call this from parent or any component)
  updateCandidate(data: Candidate): void {
    this.candidateSubject.next(data);
  }
}

Step 2: Update data from the parent component #

In your parent component's .ts file, inject the service and update the data (e.g., on initialization or after fetching from an API):

// parent component .ts file
import { Component, OnInit } from '@angular/core';
import { CandidateDataService, Candidate } from './candidate-data.service';

@Component({
  selector: 'app-candidate-tabs',
  templateUrl: './candidate-tabs.component.html',
  styleUrls: ['./candidate-tabs.component.css']
})
export class CandidateTabsComponent implements OnInit {
  public id: number | null = 123;

  constructor(private candidateDataService: CandidateDataService) {}

  ngOnInit(): void {
    // Initialize or update candidate data (replace with API call if needed)
    const initialCandidate: Candidate = {
      id: this.id,
      name: "Jane Smith",
      email: "jane.smith@example.com",
      phone: "+1-555-1234"
    };
    this.candidateDataService.updateCandidate(initialCandidate);
  }
}

Step 3: Subscribe to data in child components #

In each child component, inject the service and subscribe to the data stream:

// Example: app-candidate-profile.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CandidateDataService, Candidate } from '../candidate-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-candidate-profile',
  templateUrl: './candidate-profile.component.html',
  styleUrls: ['./candidate-profile.component.css']
})
export class CandidateProfileComponent implements OnInit, OnDestroy {
  candidate!: Candidate;
  private subscription!: Subscription;

  constructor(private candidateDataService: CandidateDataService) {}

  ngOnInit(): void {
    // Subscribe to data updates
    this.subscription = this.candidateDataService.candidate$.subscribe(data => {
      this.candidate = data;
    });
  }

  // Clean up subscription to avoid memory leaks
  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Which approach should you use? #

• Use @Input() if you have simple, one-way data flow from parent to children, and don't need real-time updates across components.
• Use the shared service if your data changes dynamically, or if you need to share the same data across multiple unrelated components.

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