Question

我正在跳过内容＆＃39;链接。该链接位于 app.component 中，内容位于 login.component 中，以及目标。

我已经尝试了several methods，但都没有成功。所以现在我正在尝试发射器/监听器：

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（listener）：

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

不知道登录是如何从登录中订阅该事件的。我一直在寻找那些说不的文章How to subscribe to an event on a service in Angular2?，但没有文章说明如何做。

Answer 1

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

创建组件时：

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

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

在另一个模板中：

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

当事件发出时（通过调用this.name.emit("value")）上面的＆＃34;代码在这里＆＃34;表达式由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");
   }
}

这将通过模板表达式创建从Foo组件到Bar组件的单向通信。

Answer 2

在login.component中，你可以写

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

Answer 3

您将事件发射器放在错误的组件中。事件发射器用于儿童 - ＆gt;家长沟通。所以你可能想把它放在你的登录组件中，如果你想要它做什么的话。

login.component.ts

 export class LoginComponent {
     @Output() skipToCtrl: EventEmitter<any> = new EventEmitter();
     emitSkipEvent(): void {
         this.skipToCtrl.emit(true);
     }
  }

app.component.html

 <login-component (skipToCtrl)="skipLink()">

我的解决方案存在问题，该事件永远不会被释放，因为我从不调用loginComponent.emitSkipEvent，我不认为EventEmitter行为是您正在寻找的，因为您想要将数据从父级传递到loginComponent。您可能希望在登录组件上放置一个@Input参数，并实现onChanges来处理该行为。更好的答案：

 import {OnChanges} from '@angular/core'
 export class LoginComponent implements OnChanges {
     @Input() skipToCtrl: boolean;
     ngOnChanges(){
         if(skipToCtrl){
             // handle login component behavior changes here. Looks like you want to focus on the input
             document.querySelector('input').focus();
         }
      }
}

然后在app.component.ts中创建一个布尔变量来切换

 linkClicked:boolean;

然后在你的app.component.html中你可以改变点击行为并将linkClicked绑定到你的登录组件的skipToCtrl boolean：

<a href="#content-start" (click)="linkClicked = true">Skip to main content</a>
<login-component [skipToCtrl]='linkClicked'>

现在，当您单击该链接时，它将传递给登录组件，并且将触发OnChanges逻辑。

Answer 4

100％工作!!!!它基本上是一个使用Javascript的补丁：

创建一个隐藏的输入元素，在其中需要调用组件（在您的情况下为app.component）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这里Mydata将在app.component

中运行

使用javascript：

调用/从其他组件（登录）单击此项

<input type="hidden" id="getdata" (click)="Mydata();">

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

4 个答案: