Angular2 - 在组件外部调用组件的方法

Question

我正在尝试更新点击事件按钮的标签。我有以下代码。单击事件时未调用方法 setText()。

此外，如果尝试将调用包含在模板本身中作为

<button (click)="setText('new name')"></button>

有效。

但我想公开这个 api 并想调用方法

<mybutton (click)="setText('new name')"></button>

有人可以告诉我这里有什么错误吗？我正在使用 angular2 测试版。

app.ts

import {Component, View, Input, Output, EventEmitter} from 'angular2/core';

@Component({
    selector: 'mybutton',

})
@View({
    template: `<button>{{label}}</button>`

})

export class MyButton {      

    @Input() label: string;
    @Output() click = new EventEmitter();   

    setText(newName: string) {
        this.label = newName;            
    }
}

index.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <!-- 1. Load libraries -->
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages : {
                    app : {
                        format : 'register',
                        defaultExtension : 'js'
                    }
                }
            });

            System.import('app/boot').then(null, console.error.bind(console));
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <mybutton [label]="'My  Button'" (click)="setText('New Name')" ></mybutton>
    </body>
</html>

Answer 1

只需使用

template: `<button (click)="setText()">{{label}}</button>`

在你的 index.html 中只是 <mybutton></mybutton>

Answer 2

事实上，当定义一个@Ouput时，它意味着你希望你的组件发出一个事件

click.emit(null);

您的代码有点奇怪的是您试图在外部管理组件的内部事件。所以我认为您的组件中不需要这个 Output...

使用以下代码，您希望在父组件中为您的组件处理 click 事件。因此 setText 方法将是此父组件中的一种（而不是子组件中的一种）。

<mybutton (click)="setText('new name')"></button>

如果您想与 mybutton 组件交互以在单击事件时更新其按钮标签，您可以获取对该组件的引用并更新 label 属性。

@Component({
  (...)
  template: `
    <mybutton #comp (click)="comp.label = 'new name'"></button>
  `,
  directives: [ MyButton ]
})
(...)

这是您的 mybutton 组件的代码：

@Component({
  selector: 'mybutton',
  template: `<button>{{label}}</button>`
})
export class MyButton {      
  @Input() label: string;

  constructor() {
    this.label = 'test';
  } 

  setText(newName: string) {
    this.label = newName;            
  }
}

蒂埃里

Angular2 - 在组件外部调用组件的方法

Angular2 - call a Component's method outside the component

angular2-directives

angular