发射器函数未得到处理

Question

我对angular 2,4代码很陌生。

我正试图通过@Input和@Output传递信息，我被困在了一个部件中。我正在将布尔变量从true更改为false。emmit方法被调用，但在父组件中处理的方法从未被调用(displayCounter(。

如果我使用类似的东西

template: `<app-welcome (valueChange)='displayCounter($event)'></app-welcome>`

displayCounter实际上被调用了，但如果我在div中放置"displayCounter($event("，为什么不调用它呢？

父组件：

Ts

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'app';
error: any;
@Input() public autorized: boolean;

constructor(public af: AngularFireAuth, public router: Router) {
this.autorized=true;

}
signOut(): void {
this.af.auth.signOut();
this.router.navigate(['/'])
}
displayCounter(count) {
console.log("holaa wey")
console.log(count);
}

html

<div class="nav-wrapper container" (valueChange)='displayCounter($event)'>
<a id="logo-container" [routerLink]="['/']" class="brand-logo"></a>

<ul class="right hide-on-med-and-down">
<li><a [routerLink]="['/about']">Acerca de</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a [routerLink]="['/info']">Como funciona?</a></li>
</ul>

<ul *ngIf="autorized"  class="right hide-on-med-and-down">
<li><a [routerLink]="['/login']">Login</a></li>
</ul>

<!--<ul *ngIf="!autorized" class="right hide-on-med-and-down">
<li><a (click)="signOut()">Log out</a></li>
</ul> -->
<ul  *ngIf="autorized"  class="right hide-on-med-and-down">
<li><a [routerLink]="['/registration']">Registrarse</a></li>
</ul>

子组件(欢迎组件(：

TS

export class WelcomeComponent implements OnInit {

error: any;
autorized: boolean;
@Output() valueChange = new EventEmitter();
constructor(public af: AngularFireAuth, public router: Router) {

}
ngOnInit() {
this.autorized = false;
}
loginFb() {
console.log("paso porsadsdf")
this.valueChange.emit(this.autorized);
}

Html

<div class="row center">
<a (click)="loginFb()" id="download-button" class="btn-large waves-effect waves-light orange">Buscar</a>  
</div>

Answer 1

运行此代码。我评论并删除了一些代码。在查看发射器函数后添加所有这些。

//Parent Component ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-parent',
templateUrl: 'src/parent.component.html'
})
export class parentComponent  {
title = 'app';
error: any;
@Input() public autorized: boolean;
//   constructor(public af: AngularFireAuth, public router: Router) {
//     this.autorized=true;
// }
signOut(): void {
this.af.auth.signOut();
// this.router.navigate(['/'])}
displayCounter(count) {
console.log("holaa wey")
console.log(count);
}
}
//Parent Component html
<div class="nav-wrapper container">
<h1>{{title}}</h1>
<my-child (valueChange)='displayCounter($event)'></my-child>
</div>
//Child Component ts
import { Component, EventEmitter, Output , OnInit} from '@angular/core';
@Component({
selector: 'my-child',
templateUrl: 'src/child.component.html'
})
export class ChildComponent implements OnInit {
autorized: boolean;
@Output() valueChange = new EventEmitter<boolean>();
// constructor(public af: AngularFireAuth, public router: Router) {
// }
constructor(){};
ngOnInit() {
this.autorized = false;
}
loginFb() {
console.log("paso porsadsdf")
this.valueChange.emit(this.autorized);}
}
//Child Component html
<div>
<a (click)="loginFb()" id="download-button">
<button>Buscar</button>
</a>
</div>

Answer 2

你能试试这个吗？

@Output() valueChange: EventEmitter<boolean>; constructor(public af: AngularFireAuth, public router: Router) { this.valueChange = new EventEmitter<boolean>(); }