时间戳

首页 > 解决方案 > 发射器功能没有得到处理

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>

标签： angularangular-ng-if

解决方案

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

//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>

推荐阅读