Angular 2事件不起作用

Question

我一直试图找到解决问题的方法，但到目前为止还没有找到任何解决方法。

问题是父组件没有选择我的自定义事件。 console.log＆＃34;发出的事件＆＃34;显示在控制台中，但AppComponent未捕获实际事件。

我在这里做错了什么？

app.component.ts

import { InventoryService } from './providers/inventory.service';
import { Component, OnInit, NgModule } from '@angular/core';

@Component({
  selector: 'apk-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [InventoryService]
})
export class AppComponent implements OnInit {
  articles;

  constructor(private inventoryService: InventoryService) { }

  ngOnInit(): void {}

   onGetItems(amount: number) {
     console.log(amount);
     this.inventoryService.getArticles(amount).subscribe(data => this.articles = data);
   }
}

app.component.html

<apk-navbar (getArticlesEvent)="onGetItems($event)"></apk-navbar>

  <table class="highlight centered">
  <thead>
    <tr>
      <th>Namne</th>
    </tr>
  </thead>
    <tr *ngFor="let article of articles">
      <td>{{article.name}}</td>
    </tr>
  </table>
  <router-outlet></router-outlet>

navbar.component.ts

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

    @Component({
      selector: 'apk-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.scss']
    })
    export class NavbarComponent implements OnInit {

      @Output() getArticlesEvent: EventEmitter<number> = new EventEmitter();

      constructor() { }

      ngOnInit() {  }

      onGetArticles(amount: number){
        console.log("Event emitted");
        this.getArticlesEvent.emit(amount);
      }

    }

navbar.component.html

    <div class="nav-content">
        <ul class="tabs tabs-transparent">
          <li class="tab"><span><a (click)="onGetArticles(20)">Articles</a></span></li>
        </ul>
    </div>

Answer 1

当提供stackblitz时，您已将导航组件添加为自举，您只需引导应用程序组件，因此将其从NgModule中删除，并仅启动...

bootstrap: [AppComponent]

<强> DEMO

作为一个不相关的问题，我只想指出，您需要在构造函数中注入服务，而不是将它们声明为组件中的变量。检查演示，我也更新了它。

Answer 2

我猜你在EventEmitter声明中犯了错误。试试这种方式：

@Output() getArticlesEvent = new EventEmitter<number>();

如果这没有帮助，我想问题就在那里，你调用了 onGetArticles 方法。

尝试通过单击span来调用此方法，这样：

<li class="tab"><span (click)="onGetArticles(20)"><a>Articles</a></span></li>

或通过阻止默认操作，以这种方式：

<li class="tab"><span><a (click)="onGetArticles($event, 20)">Articles</a></span></li>

并以这种方式更改您的方法：

onGetArticles(event, amount: number) {
    event.preventDefault();
    this.getArticlesEvent.emit(amount);
}

Answer 3

app.component.ts

<apk-navbar (getArticlesEvent)="loadEv($event)"></apk-navbar>

  <table class="highlight centered">
  <thead>
    <tr>
      <th>Namne</th>
    </tr>
  </thead>
    <tr *ngFor="let article of articles">
      <td>{{article.name}}</td>
    </tr>
  </table>
  <router-outlet></router-outlet>

app.component.html

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

        @Component({
          selector: 'apk-navbar',
          templateUrl: './navbar.component.html',
          styleUrls: ['./navbar.component.scss']
        })
        export class NavbarComponent implements OnInit {
          @Output() getArticlesEvent=new EventEmitter<any>();

          constructor() { }

          ngOnInit() {  }

          onGetArticles(amount: number){
            console.log("Event emitted");
            this.getArticlesEvent.emit({amount});
          }

        }

navbar.component.ts

  <div class="nav-content">
                <ul class="tabs tabs-transparent">
                  <li class="tab"><span><a (click)="onGetArticles(20)">Articles</a></span></li>
                </ul>
            </div>

navbar.component.html

dias.forEach((dia) => {
    switch (dia) {
        ...
        ...
    }
});

$("#selectable").unbind().selectable({
    selected: function (event, ui) {
        $("#select-result").show();
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
});
    $("#select-result").unbind().selectable({
    selected: function (event, ui) {
        if ($(ui.selected).hasClass("selected")) {
            $(ui.selected).removeClass("selected");
        }
        else $(ui.selected).addClass("selected");
    }
});