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

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

在一个案例中，我成功地在孩子和家长之间传递数据。 子标题组件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 

这可以正常工作。父组件正在调用正在传递的值

应用程序模块文件为：

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() {

  }

}

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

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() {
  }

}

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 { }

---

您忘记在HTML中添加事件，该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>

{{component.name}，{{{component.amount}

---

你忘记了最基本的部分是的，我知道最初我只是写了一小段我认为相关的代码，但我不太确定问题出在哪里，我从昨天开始就一直试图解决这个问题，如果我知道问题出在哪里，我可能已经解决了。”就是这样，我一直在调用子方法的函数，而不是调用发出的值。我只是忘记了更新它。但这就是最初的方式，当我从函数中删除所有参数以查看参数是否只是没有被读取时，我删除了（$event）

    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 { }

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