Question

我可以将Person之类的类对象传递到child组件中的parent组件，而不会出现任何问题。但我想在child组件中操纵该对象并将其传递回parent组件。

这是子组件类：

export class ActionPanelComponent {
  @Input('company') company: Company;
  @Output() notify: EventEmitter = new EventEmitter();

  constructor() {
  }

  public deleteCompany() {
    console.log('display company');
    console.log(this.company);
    // FIXME: Implement Delete
    this.company = new Company();
  }

  public onChange() {
    this.notify.emit(this.company);
  }

}

这是此组件的html（摘录）：

<div class="row" (change)="onChange()">
  <div class="col-xs-2">
    <button md-icon-button >
      <md-icon>skip_previous</md-icon>
    </button>
  </div>

这是父组件类（摘录）：

  public onNotify(company: Company):void {
    this.company = company;
  }

父组件html（摘录）：

<action-panel [company]="company" (notify)="onNotify($event)"></action-panel>

我做错了，因为我无法在company内传递我的.emit对象，但没有任何作用。

在组件之间实现双向对象绑定的正确方法是什么？提前谢谢！

Answer 1

您错过了EventEmitter初始化的类型。

您可以使用Output绑定来实现双向对象绑定：

子组件（ts）

export class ActionPanelComponent {
    @Input('company') company: Company;
    @Output() companyChange: EventEmitter = new EventEmitter<Company>();

    constructor() {
    }

    public deleteCompany() {
       console.log('display company');
       console.log(this.company);
       // FIXME: Implement Delete
       this.company = new Company();
    }

    public onChange() {
       this.companyChange.emit(this.company);
    }

}

父组件（html）

<action-panel [(company)]="company"></action-panel>

因此，您不需要声明额外的函数onNotify。如果确实需要onNotify函数，请使用输出绑定的其他名称：

export class ActionPanelComponent {
    @Input('company') company: Company;
    @Output() notify: EventEmitter = new EventEmitter<Company>();

    constructor() {
    }

    public deleteCompany() {
       console.log('display company');
       console.log(this.company);
       // FIXME: Implement Delete
       this.company = new Company();
    }

    public onChange() {
       this.notify.emit(this.company);
    }

}

Answer 2

像这样更改，告诉TS Type EventEmitter emit应该export class ActionPanelComponent { @Input('company') company: Company; @Output() notify = new EventEmitter<Company>(); //<---- On this line! constructor() { } public deleteCompany() { console.log('display company'); console.log(this.company); // FIXME: Implement Delete this.company = new Company(); } public onChange() { this.notify.emit(this.company); } }：

public function store(AdminCreateNewCourseRequest $request)
{
    $this->authorize('create-course');

    $course = new Course;

    $course->name               = $request->name;
    $course->tutor_id           = $request->tutor_id;
    $course->student_id         = $request->student_id;
    $course->spoken_language    = $request->spoken_language;
    $course->description        = $request->description;

    $course->save();

    What to do?

    return redirect($course->path())
        ->with('flash', 'The course has been published');
}

Answer 3

如果对任何人都有帮助，这是对我有用的解决方法。

您的父parent-component.ts就像;

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

@Component({
selector: 'parent',
templateUrl:'./parent.component.html',
styleUrls: ['./parent.component.css']
})
export class Parent implements OnInit {

let parentInstance= this; //passing instance of the component to a variable
constructor() { }

parentMethod(var:<classtyepyourchoice>){
console.log(var);
}



 ngOnInit() {
 }



}

在您的parent.component.html中，您将会有孩子

 <child [parent]="parentInstance" ></child>

该对象将在子组件中可用

现在，在您的子组件中，您将收到这样的消息

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

@Component({
selector: 'child',
templateUrl:'./child.component.html',
styleUrls: ['./child.component.css']
})
export class Child implements OnInit {

@Input('parent') parent;
constructor() { }

childMethod(yourClassObject){
this.parent.parentMethod(yourClassObject);
}



 ngOnInit() {
 }



}

因此，您可以从孩子那里传递类对象，就像这样，它对我有用。

Angular（4）：将一个类对象从子组件传递给父组件

3 个答案: