无法使用子方法触发器调用父方法

在 angular 应用程序的一种情况下，我无法使用子触发器执行该方法。我在父方法和子方法中都放置了一个控制台日志，根本只调用了子方法。父级有一个类型对象的参数，所以我试图删除参数只是为了查看是否可以调用该函数在我看来问题似乎位于 (myChildMethod)="myParentMethod()"但我不知道为什么在应用程序的另一个实例中我已经设法做到这一点，所以我试图复制它并检查是否有任何差异，但我看到的那些，例如间距似乎无关紧要。我已将我认为与问题相关的代码部分标记为“重要” 但是我已经发布了整个组件，以防问题出在我不知道应该查看的地方。

子购物编辑组件 HTML 是：

<div class="row">
    <div class="col-xs-12">
        <form >
            <div class="row">
                <div class="col-sm-5 form-group">
                    <label for="name">Name</label> 
                    <input type="text" 
                    id="name" 
                    class="form-control"
                    #nameInput
                    >
                </div>
                <div class="col-sm-2 form-group">
                    <label for="amount">amount</label>
                    <input type="number" 
                    id="amount" 
                    class="form-control"
                    #amountInput>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <!-- IMPORTANT -->
                    <button class="btn btn-success"
                        type="button"
                        (click)="addNew()">Add</button>
                    <button class="btn btn-danger" 
                    type="button">Delete</button>
                    <button class="btn btn-primary" type="button">Clear</button>
                </div>
            </div>
        </form>
    </div>
</div>

子购物编辑组件 TS 是：

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

import { Component, OnInit, ElementRef, Output, EventEmitter, ViewChild } from '@angular/core';
import { Ingredient } from "../../shared/ingredient.model"

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})  
export class ShoppingEditComponent implements OnInit {

  @ViewChild('nameInput', {static: false}) nameInputRef: ElementRef;
  @ViewChild('amountInput', {static: false}) amountInputRef: ElementRef;

  @Output() emitIngredient = new EventEmitter<Ingredient>(); 
  // IMPORTANT 
  addNew(nameEl: ElementRef, amountEl:  ElementRef){
    console.log("addNew");
    const newIngredient = new Ingredient(
       this.nameInputRef.nativeElement.value,
       this.amountInputRef.nativeElement.value
    );

        this.emitIngredient.emit(newIngredient);
  }

  constructor() { 
  }

  ngOnInit() {

  }

}

父购物清单组件 html 是：

<div class="row">
    <div class="col-xs-10">
        <!-- IMPORTANT -->
        <app-shopping-edit  (addNew)= "addNewIngredient($event)"></app-shopping-edit>
        <hr>
        <ul class="list-group">
            <a class="list-group-item" 
            style="cursor: pointer"
            *ngFor="let ingredient of ingredients">
            {{ ingredient.name }} , {{ ingredient.amount}}  
        </a>
        </ul>
    </div>
</div>

而父购物清单组件 ts 是：

import { Component, OnInit, Input } from '@angular/core';
import { Ingredient } from '../shared/ingredient.model';
@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {

  ingredients: Ingredient[] = [
    new Ingredient('Apples', 5),
    new Ingredient('Potato', 3)

  ];
  // IMPORTANT
  addNewIngredient(newIngredient: Ingredient){
    console.log("addNewIngredient");
    this.ingredients.push(newIngredient);
  }

  constructor() { }

  ngOnInit() {
  }

}

我在一个案例中成功地在孩子和父母之间传递了数据。子标题组件 Html。下面的所有代码都适用于应用程序的工作示例。

    <div class="navbar-default">
            <ul class="nav navbar-nav">
                <li (click)="onRecipeSelected('recipe')"><a href="#">Recipes</a></li>
                <li (click)="onListSelected('list')"><a href="#">Shopping List</a></li>
            </ul> 
</div>

Child Header Component Ts 

从“@angular/core”导入 { Component, EventEmitter, Output };

@Component({ selector: 'app-header', templateUrl: "./header.component.html" }) 导出类 HeaderComponent {

    @Output() featureSelected = new EventEmitter<string>();

    onRecipeSelected(feature: string){

        this.featureSelected.emit(feature);
    }

    onListSelected(feature: string){
        this.featureSelected.emit(feature)
    }

}

父应用组件 HTML

<div class="row">
        <div class="col-mid-12">
          <app-recipes 
          *ngIf="loadedFeature === 'recipe'"></app-recipes>
          <app-shopping-list 
          *ngIf="loadedFeature === 'list'"></app-shopping-list>
        </div>
    </div>

父应用组件 Ts

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'RecipeApp';
  value = 10;



   loadedFeature = "recipe";

   onNavigate(feature: string){

     this.loadedFeature = feature;
   }
 }

这工作正常。父组件被称为传递的值。

应用模块文件是：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { HighlighterDirective } from './highlighter/highlighter.directive';
import { UnlessDirective } from './highlighter/unless.directive';
import { DropdownDirective } from './shared/dropdown.directive';
import { FormsModule } from '@angular/forms';  

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    RecipeDetailComponent,
    HighlighterDirective,
    UnlessDirective,
    DropdownDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }