如何在Angular 5中实现多级组件/模板事件处理？

Hey there! Let's walk through how to manage event handling between your nested components in Angular 5. From your setup, Template A is a child component embedded inside Template B (the parent), so we'll cover two common scenarios you might need:

Scenario 1: Parent Component (Template B) Triggers Action & Accesses Child Data #

If you want the onSubmit button in Template B to grab values from Template A's input fields, here's how to do it:

Step 1: Update Template A Component #

First, add two-way data binding to your inputs and expose a method to retrieve their values:

// template-a.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'templateA',
  template: `
    <input type="text" [(ngModel)]="input1">
    <input type="text" [(ngModel)]="input2">
    <input type="text" [(ngModel)]="input3">
  `
})
export class TemplateAComponent {
  // Define properties to bind with inputs
  input1: string = '';
  input2: string = '';
  input3: string = '';

  // Method to return all input values
  getInputValues() {
    return {
      input1: this.input1,
      input2: this.input2,
      input3: this.input3
    };
  }
}

Step 2: Modify Template B's Template & Component #

Add a template reference to the child component, then use it in the button's click handler:

<!-- template-b.component.html -->
<templateA #templateARef></templateA>
<button (click)="onSubmit(templateARef)">Submit</button>

// template-b.component.ts
import { Component } from '@angular/core';
import { TemplateAComponent } from './template-a.component';

@Component({
  selector: 'templateB',
  templateUrl: './template-b.component.html'
})
export class TemplateBComponent {
  onSubmit(childComponent: TemplateAComponent) {
    // Fetch values from the child component
    const inputValues = childComponent.getInputValues();
    console.log('Submitted values:', inputValues);
    
    // Add your logic here (e.g., API calls, form validation)
  }
}

Important Note #

Don't forget to import FormsModule in your Angular module to use ngModel:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Required for ngModel

import { TemplateAComponent } from './template-a.component';
import { TemplateBComponent } from './template-b.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [TemplateAComponent, TemplateBComponent],
  bootstrap: [TemplateBComponent]
})
export class AppModule { }

Scenario 2: Child Component (Template A) Emits Events to Parent #

If you want Template A to notify Template B when input values change (before the submit button is clicked), use Angular's @Output decorator:

Step 1: Update Template A to Emit Events #

// template-a.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'templateA',
  template: `
    <input type="text" [(ngModel)]="input1" (ngModelChange)="emitValues()">
    <input type="text" [(ngModel)]="input2" (ngModelChange)="emitValues()">
    <input type="text" [(ngModel)]="input3" (ngModelChange)="emitValues()">
  `
})
export class TemplateAComponent {
  input1: string = '';
  input2: string = '';
  input3: string = '';

  // Define an output event to send data to parent
  @Output() valuesUpdated = new EventEmitter<{input1: string, input2: string, input3: string}>();

  emitValues() {
    // Send the latest input values to the parent
    this.valuesUpdated.emit({
      input1: this.input1,
      input2: this.input2,
      input3: this.input3
    });
  }
}

Step 2: Listen to Events in Template B #

<!-- template-b.component.html -->
<templateA (valuesUpdated)="onValuesUpdated($event)"></templateA>
<button (click)="onSubmit()">Submit</button>

// template-b.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'templateB',
  templateUrl: './template-b.component.html'
})
export class TemplateBComponent {
  private currentInputValues: {input1: string, input2: string, input3: string} = {
    input1: '',
    input2: '',
    input3: ''
  };

  onValuesUpdated(values: {input1: string, input2: string, input3: string}) {
    // Store the latest values from the child
    this.currentInputValues = values;
    console.log('Updated values from child:', values);
  }

  onSubmit() {
    // Use the stored values for submission
    console.log('Submitting values:', this.currentInputValues);
    // Add your submission logic here
  }
}

Key Takeaways #

• Use template references when the parent needs to directly access child component methods/properties.
• Use @Output + EventEmitter when the child needs to send data/events up to the parent (follows Angular's unidirectional data flow best practice).
• Always make sure to declare your components and import required modules (like FormsModule) in your Angular module.

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