Angular 2：组件之间的发射器监听器

Question

我正在制作“跳转到内容”链接。链接在app.component 中，内容在login.component 中，还有目标。

我尝试了几种方法，但都没有奏效。所以现在我正在尝试发射器/监听器：

app.component (emitter):

import { Component, Output, EventEmitter} from '@angular/core';

export class AppComponent {

    @Output() skipToCtrl: EventEmitter<any> = new EventEmitter();

    skipLink() {
        this.skipToCtrl.emit();
    }
}

<a href="#content-start" (click)="skipLink()">Skip to main content</a>

login.component（侦听器）：

<input type="text" #firstControl name="username" />

不知道登录如何从登录中订阅事件。我一直在寻找文章，说不能这样做如何订阅事件在Angular2服务？但没有描述如何做到这一点的文章。

Answer 1

事件发射器用于将输出添加到模板中。使用圆括号()绑定到事件。

创建组件时：

@Component({...})
public export FooComponent {
   @Output() name: EventEmitter = new EventEmitter<string>();
}

上面的组件现在有一个属性，可以与()另一个模板中的括号一起使用。

在另一个模板中：

 <foo (name)="// code here //"></foo>

当事件被发出（通过调用this.name.emit("value")）时，上面的“代码在这里”表达式由 Angular 执行。该emit函数采用单个参数作为$event变量传递给表达式。

让另一个组件接收这些事件就是使用另一个组件模板中的表达式。

让我们创建一个Bar组件

@Component({...})
export class BarComponent {
    public setName(value:string) {
        console.log(value); // will output "chicken"
    }
}

上面的组件有这个模板：

<foo (name)="setName($event)"></foo>

现在在Foo组件中我们发出一个值。

@Component({...})
public export FooComponent implements OnInit {
   @Output() name: EventEmitter = new EventEmitter<string>();

   public ngOnInit() {
       this.name.emit("chicken");
   }
}

这通过模板表达式创建了从组件到组件的单向通信。FooBar

Answer 2

在login.component中，你可以写

<input type="text" #firstControl (skipToCtrl)="callsomemethod($event)" name="username" />