Question

我有两个组成部分。组件A包含一个我想通过单击组件B视图中的按钮调用的函数。如何解决这个问题？

我尝试过类似的事情：

查看组件B

<button (click)="MyApp.myFunction()">Click here</button>

app.component.ts（name class = MyApp）

myFunction(){
   console.log("clicked the button");
}

Answer 1

您可以通过多种方式使用Shared Services或使用Event emitters或此

组件B

<button (click)="myFunction()">Click here</button>

myFunction(){
    let component = new ComponentB();
    component.myFunctionA();
}

<强> ComponentA

myFunctionA(){
   console.log("called");
}

Answer 2

您应该可以为ComponentB指定@Output EventEmitter，例如在component-b.ts中：

@Output() onButtonClick: EventEmitter<any> = new EventEmitter();

然后在component-b.ts中添加一个点击处理程序：

buttonClick() {
    this.onButtonClick.emit();
}

然后，在component-a.html中，您可以为onButtonClick事件添加绑定：

(onButtonClick)="someHandler()"

在component-a.ts中，您可以添加其他处理程序：

someHandler() {
    console.log('component-b button click');
}

Answer 3

事实证明，存在父/子关系。在这种情况下，您使用@Output（）将信息传递给父级。

采取的步骤：
- 将输出属性添加到子组件
- 在子组件的buttonClicked方法中，使用output属性发出一个事件，其中包含要传递给父组件的信息
- 在父组件模板的元素上，绑定到输出属性并在父控制器上调用处理函数，传入从子组件发出的值 - 在步骤3中创建的处理函数中，将属性设置为从子组件

接收的值

所以这意味着：

@Component({
    selector: 'child',
    template: `<button (click)="buttonClicked()">Click me!</button>`
})
export class ChildComponent{
    @Output() buttonClick = new EventEmitter();  
    buttonClicked() {
        this.buttonClick.emit();
    }
}

@Component({
    selector: 'parent',
    template: `
        <child (buttonClick)="buttonClickedHandler($event)"></child>
    `
})
export class ParentComponent{
    buttonClickedHandler(data) {
        console.log('Hello world!');
    }
}

Angular 4 - 从组件B的角度看组件A的调用函数

3 个答案: