从子组件访问所有父组件功能

Question

我正在创建一个组件，我将有3个按钮[ Edit, Cancel, Save ]，当用户单击编辑按钮时，将出现保存和取消按钮，当单击保存按钮时，它将触发父级的功能组件。

问题是当我将一个函数从父组件传递给 ESC 组件时，它无法从父指令访问其他函数。

注意组件将在不同的全局操作中使用 组件

Plunker：http://plnkr.co/edit/ZmyFjwhM6tPZXubTfeGA?p=preview&open=app%2Fapp.component.ts

代码：

<div [hidden]="isEdit">
      <button (click)="toggleEdit()">Edit</button>
    </div>
    <div [hidden]="!isEdit">
      <button (click)="runFunction(); toggleEdit()">Save</button>
      <button (click)="toggleEdit()">Cancel</button>
    </div>

export class EscComponent { 
    @Input() run: Function;

    runFunction() {
      console.log('Run Function')
      this.run()
    }

    isEdit = false;

    toggleEdit() {
      this.isEdit = !this.isEdit;
    }
}

父组件：

Component usage: <app-esc [run]="setName"></app-esc>


export class AppComponent { 
      name = 'Angular'; 

      setName() {
        this.setNameCd();
      }

      setNameCb() {
         this.name = 'Angular 2 asd';
      }
    }

Answer 1

@Harry Ninh 是对的，你应该使用装饰器@Output 或者创建一个特定的服务。这是一个带有 @output 的工作 Plunker：

http://plnkr.co/edit/wadCAyW5kah0VjVR2m5B?open=app%2Fapp.component.ts&p=preview

您的原始 plunker 中也有一些拼写错误，因此您应该检查您的代码是否有其他拼写错误。

这是它的工作原理：

家长收听输出

<app-esc (endEditing)="setName($event)"></app-esc>

在子组件中，导入@Output 和EventEmitter

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

启动输出：

@Output() endEditing = new EventEmitter();

在相关函数中发出事件

this.endEditing.emit();