Question

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

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

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

它有效。

但我希望公开这个api并想要调用像

这样的方法

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

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

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

事实上，在定义@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;            
  }
}

亨利

Answer 2

只需使用

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

并在index.html <mybutton></mybutton>

中

Angular2 - 在组件

2 个答案: