Angular：无ng指令父子组件传值及点击触发Input/Output传值实现

下面我来详细解答你提出的两个Angular父子组件交互相关的问题：

1. 不使用@Input()指令实现父组件向子组件传递输入值 #

如果不想用Angular官方推荐的@Input()装饰器，有两种比较常用的实现方式：

方式一：通过ViewChild获取子组件实例直接赋值 #

这种方式适合父组件和子组件是直接嵌套的关系，父组件可以直接获取子组件的实例，然后给它的属性赋值。

父组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
  // 获取子组件的引用
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngAfterViewInit() {
    // 组件视图初始化完成后，直接给子组件的属性赋值
    this.childComponent.message = "来自父组件的消息";
  }
}

子组件代码：

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

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  // 不需要@Input()，直接定义接收数据的属性
  message: string = "";
}

方式二：使用共享服务传递数据 #

这种方式更灵活，适合跨层级组件或者非直接父子的组件通信，当然直接父子组件也能用。通过一个全局的服务来存储和传递数据，父组件更新服务中的数据，子组件订阅数据变化即可。

共享服务代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataShareService {
  // 用BehaviorSubject存储数据，确保订阅者能拿到最新值
  private messageSource = new BehaviorSubject<string>("");
  currentMessage = this.messageSource.asObservable();

  // 提供更新数据的方法
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

父组件代码：

import { Component } from '@angular/core';
import { DataShareService } from './data-share.service';

@Component({
  selector: 'app-parent',
  template: `<button (click)="sendToChild()">点击传递数据</button>`
})
export class ParentComponent {
  constructor(private dataService: DataShareService) {}

  sendToChild() {
    // 调用服务的方法传递数据
    this.dataService.sendMessage("通过共享服务传递的内容");
  }
}

子组件代码：

import { Component, OnInit } from '@angular/core';
import { DataShareService } from './data-share.service';

@Component({
  selector: 'app-child',
  template: `<p>{{ receivedMessage }}</p>`
})
export class ChildComponent implements OnInit {
  receivedMessage: string = "";

  constructor(private dataService: DataShareService) {}

  ngOnInit() {
    // 订阅服务中的数据变化
    this.dataService.currentMessage.subscribe(message => {
      this.receivedMessage = message;
    });
  }
}

2. 使用@Input()和Output+EventEmitter实现父子组件交互（点击提交传值展示） #

这是Angular官方推荐的父子组件交互方式，@Input()负责父向子传值，Output+EventEmitter负责子向父发送事件通知，刚好匹配你说的“点击提交按钮传递输入数据给子组件展示”的场景，下面是完整实现：

步骤1：子组件定义@Input()接收数据 #

子组件通过@Input()装饰器声明一个属性，用来接收父组件传递过来的数据：

child.component.ts：

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

@Component({
  selector: 'app-child',
  template: `<div *ngIf="receivedData">
               <h3>子组件展示区：</h3>
               <p>{{ receivedData }}</p>
             </div>`
})
export class ChildComponent {
  // 用@Input()标记这个属性可以接收父组件的输入
  @Input() receivedData!: string;
}

步骤2：父组件实现输入框和提交逻辑 #

父组件中添加输入框和提交按钮，点击提交时将输入框的值传递给子组件：

parent.component.ts：

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

@Component({
  selector: 'app-parent',
  template: `<div class="parent-container">
               <input type="text" [(ngModel)]="inputValue" placeholder="输入要传递的内容">
               <button (click)="submitData()">提交</button>
               <!-- 通过属性绑定将父组件的dataToChild传给子组件的receivedData -->
               <app-child [receivedData]="dataToChild"></app-child>
             </div>`
})
export class ParentComponent {
  inputValue: string = "";
  dataToChild: string = "";

  submitData() {
    // 点击提交时，把输入框的值赋值给要传递给子组件的变量
    this.dataToChild = this.inputValue;
    // 可选：清空输入框
    this.inputValue = "";
  }
}

注意：这里用到了[(ngModel)]双向绑定，需要在你的AppModule中导入FormsModule才能正常使用哦。

可选：子组件通过Output给父组件反馈 #

如果需要子组件在收到数据后通知父组件，可以添加Output+EventEmitter：

修改child.component.ts：

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

@Component({
  selector: 'app-child',
  template: `<div *ngIf="receivedData">
               <h3>子组件展示区：</h3>
               <p>{{ receivedData }}</p>
               <button (click)="notifyParent()">确认已收到</button>
             </div>`
})
export class ChildComponent {
  @Input() receivedData!: string;
  // 定义一个输出事件，用来向父组件发送通知
  @Output() dataConfirmed = new EventEmitter<string>();

  notifyParent() {
    // 发送包含数据的通知给父组件
    this.dataConfirmed.emit(`已成功接收数据：${this.receivedData}`);
  }
}

修改父组件模板和类：
parent.component.ts模板新增：

<!-- 绑定子组件的输出事件 -->
<app-child [receivedData]="dataToChild" (dataConfirmed)="handleChildConfirm($event)"></app-child>
<!-- 展示子组件的反馈 -->
<div *ngIf="childFeedback">
  <h4>子组件反馈：{{ childFeedback }}</h4>
</div>

parent.component.ts类新增：

childFeedback: string = "";

handleChildConfirm(message: string) {
  this.childFeedback = message;
}

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