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

【问题标题】：Angular2 - call a Component's method outside the componentAngular2 - 在组件外部调用组件的方法
【发布时间】：2016-01-08 10:17:35
【问题描述】：

我正在尝试在单击事件上更新按钮的标签。我有以下代码。方法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>

【问题讨论】：

标签： angular angular2-directives

【解决方案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;            
  }
}

蒂埃里

【讨论】：

你好蒂埃里！在哪里指定 #comp 是指 MyButton ？我只是在做一个 poc 来创建自定义元素，因此我想公开 api 并做到这一点。
其实在自定义组件上定义局部变量时，这个变量对应的是组件本身的实例;-)
我认为您应该在组件内部管理按钮的单击事件。
如果你想在组件之外抛出一些自定义事件，你可以利用带有@Output注解的事件发射器字段
当我尝试使用当前组件代码时，点击时名称不会改变。跨度>

【解决方案2】：

随便用

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

在您的index.html 中只需<mybutton></mybutton>

【讨论】：

感谢您的回复@Günter Zöchbauer！我对 angular 很陌生。你的意思是 in html 吗？在哪里给出 name 参数。
实际上，我多次阅读您的问题，但我完全不知道您试图完成什么。我更新了我认为您可能想要做的事情的答案，但可能完全错误。请在您的问题中详细说明您真正想要解决的问题。从代码中我无法推断出来。
我想公开 api 并完成它，以便任何人在共享时都可以使用自定义元素，并且他们可以根据需要控制更新按钮。顺便说一句，您之前的回复现在不可见。我正在创建一个 poc，我想在其中使用 angular2 components 构建一个 customelements 库。因此，我想公开 api，以便用户拥有更多控制权。
但是 Angular 组件是在 Angular 应用程序中使用的，所以外面不代表 Angular 之外？您需要将此 <mybutton [label]="'My Button'" (click)="setText('New Name')" ></mybutton> 添加到需要使用 bootstrap(AppComponent, ...) 或在使用 AppComponent 的任何其他组件模板中引导的 Angular 组件模板中。
在其他 Angular 组件模板中或在 html Web 应用程序中。