3

クリック イベントでボタンのラベルを更新しようとしています。次のコードがあります。クリックイベントでメソッド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>
4

2 に答える 2

3

実際、 を定義するときは@Ouput、コンポーネントにイベントを発行させたいということです。

click.emit(null);

コードで少し奇妙なのは、コンポーネントの内部イベントを外部で管理しようとしていることです。したがって、コンポーネントでこれは必要ないと思いますOutput...

次のコードを使用してclick、親コンポーネントでコンポーネントのイベントを処理します。したがって、setTextメソッドはこの親コンポーネントの 1 つになります (子コンポーネントの 1 つではありません)。

<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 に答える