Angular 2：从子组件直接发射到父组件的脚本文件

Question

我有一个嵌套组件，我希望将一些数据直接发送到父打字稿文件而不​​通过模板。 我不能使用 <child (childEvent)="parentFunc()"></child>

这可能吗？如果是这样，怎么做？

这是事物的当前状态。

parent.component.html（元素必须是这个）

<child #child> </child>

parent.component.ts

@ViewChild('child') public child;

public doSomething() {
  this.child.work();
}

public doThisWhenChildEmits(someData) {
  //?????How do I call this function from child without going through the DOM
  alert(It worked)
}

child.component.ts

@Output() private childEvent: EventEmitter<any> = new EventEmitter()
...
public work() {
   // does some work that changes the child's template
}

public clickToSendBack(){
   // click event that sends back to parent.component directly????
   this.childEvent.emit(someData);
}

Answer 1

如果您不想使用@Output，可以改用Subject：

您的父母会订阅更改。在您的父级中，在组件中声明一个主题，并在构造函数中订阅更改：

public static changesMade: Subject<any> = new Subject();

//inside constructor the following
ParentComponent.changesMade.subscribe(res => {
  //call your method here, with the res (someData) you receive from child
  this.doThisWhenChildEmits(res);
});

在你的孩子身上：

public clickToSendBack(){
   // send the data to parent
   ParentComponent.changesMade.next(someData)
}

如果这有帮助，请告诉我！ :)