我对角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>
答案 0 :(得分: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>
答案 1 :(得分:0)
你可以试试吗?
@Output() valueChange: EventEmitter<boolean>;
constructor(public af: AngularFireAuth, public router: Router) {
this.valueChange = new EventEmitter<boolean>();
}