3

我试图在点击事件上更新按钮的标签。我有以下代码。该方法setText()不会在点击事件上被调用。

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

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

有用。

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

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

有人可以建议这里的错误是什么吗？我正在使用 angular2 beta。

应用程序.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;            
    }
}

索引.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>
4

2 回答 2

3

实际上，当定义一个 时@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;            
  }
}

蒂埃里

于 2016-01-08T10:25:37.727 回答
1

只需使用

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

在你的index.html正义<mybutton></mybutton>

于 2016-01-08T10:20:59.410 回答