Angular子组件向父组件传参失败及TS2339报错排查求助

错误原因 #

serverElements是AppComponent的属性，CockpitComponent中并未定义该属性，直接调用this.serverElements.push()会触发TS2339错误。子组件无法直接访问父组件的属性，要实现子向父传递数据，需使用Angular的@Output和EventEmitter机制。

完整修复步骤 #

1. 改造CockpitComponent（子组件）

修改cockpit.component.ts，引入输出事件并在添加操作时发射数据：

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

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent {
  newServerName = '';
  newServerContent = '';

  // 定义输出事件，用于向父组件传递新元素数据
  @Output() serverCreated = new EventEmitter<{type: string, name: string, content: string}>();
  @Output() blueprintCreated = new EventEmitter<{type: string, name: string, content: string}>();

  onAddServer() {
    this.serverCreated.emit({
      type: 'server',
      name: this.newServerName,
      content: this.newServerContent
    });
    console.log("Server Added.");
  }

  onAddBlueprint(){
    this.blueprintCreated.emit({
      type: 'blueprint',
      name: this.newServerName,
      content: this.newServerContent
    });
    console.log("Blueprint Added.");
  }
}

2. 修复Cockpit模板的双向绑定

修改cockpit.component.html，给输入框添加双向绑定以获取用户输入：

<div class="row">
    <div class="col-xs-12">
        <p>Add new servers or blueprints!</p>
        <label>Server Name</label>
        <input type="text" class="form-control form-control-sm" [(ngModel)]="newServerName">
        <label>Server Content</label>
        <input type="text" class="form-control form-control-sm" [(ngModel)]="newServerContent">
        <br>
        <button class="btn btn-primary" (click)="onAddServer()">Add Server</button>
        <button class="btn btn-primary" (click)="onAddBlueprint()">Add Server Blueprint</button>
    </div>
</div>

注意：若使用Angular 16+独立组件，需在CockpitComponent的imports数组中添加FormsModule；模块式架构则在AppModule的imports中添加，否则双向绑定失效。

3. 绑定父组件的事件处理

修改app.component.html，给app-cockpit绑定子组件发射的事件：

<div class="container">
  <app-cockpit 
    (serverCreated)="onServerAdded($event)"
    (blueprintCreated)="onBlueprintAdded($event)"
  ></app-cockpit>
  <hr>
  <div class="row">
      <div class="col-xs-12">
          <app-server-elements
              *ngFor="let serverElement of serverElements"
              [element]="serverElement"
          ></app-server-elements>
      </div>
  </div>
</div>

4. 添加父组件的事件处理方法

修改app.component.ts，实现接收子组件数据并更新数组的方法：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'udemy-angular';
  serverElements = [
    { type: 'server', name: 'TestServer', content: 'Just a test' }, 
    { type: "blueprint", name: "Test Blueprint ", content: "Test Blueprint!" }
  ];

  onServerAdded(serverData: {type: string, name: string, content: string}) {
    this.serverElements.push(serverData);
  }

  onBlueprintAdded(blueprintData: {type: string, name: string, content: string}) {
    this.serverElements.push(blueprintData);
  }
}

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