访问子组件的所有父组件函数

我创建一个组件，其中我将有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'; 
     } 
    }

来源

2017-03-02 user3334406

反过来思考，使用'@ Output'来达到这个特定目的。 –

你是什么意思？林不知道这是否可以完成输出 – user3334406

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

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();

来源

2017-03-02 23:33:43 mickdev

洛尔你的答案的作品，我写了与你一样的重击者，但它不工作。你能告诉我我做错了什么吗？ http://plnkr.co/edit/ZmyFjwhM6tPZXubTfeGA?open=app%2Fapp.component.ts&p=preview – user3334406

你纠正了你所有的错别字吗？例如'this.setNameCd（）;'到'this.setNameCb（）;'？ – mickdev

OMG b和d看起来如此相似，我无法得到我做错了什么，谢谢:) – user3334406

访问子组件的所有父组件函数

回答

相关问题