Question

我正在尝试构建一个非常简单的应用程序并使用数据/事件绑定在组件之间传递信息 - 我正在遵循udemy课程来学习角度，并且该课程的一部分正在实现以下内容：

食谱项目 ---- - 的孩子----＆gt; 食谱列表 ----- 的孩子-----＆gt;的配方

recipe-item 捕获点击事件，该事件与食谱列表中的 OnSelected （）绑定。
recipe-list 会发出自定义事件 recipeSelected 但未被捕获，即 recipes-component SetSelectedRecipe 功能>绑定到事件的>不会被调用。

食谱-component.html

<div class="row">
<div class="col-md-5">
    <rb-recipe-list (recipeSelected) = "SetSelectedRecipe($event)"></rb-recipe-list>
</div>
<div class="col-md-7">
    <rb-recipe-detail [selectedRecipe]="selectedRecipe" ></rb-recipe-detail>
</div>

食谱-component.ts

import { Component, OnInit , Input, OnChanges } from '@angular/core';
import { Recipe } from './recipe'

@Component({
  selector: 'rb-recipes',
  templateUrl: './recipes.component.html'
})
export class RecipesComponent implements OnInit, OnChanges{
    @Input()    selectedRecipe: Recipe;
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges() {
  }

  SetSelectedRecipe(recipe : Recipe)
  {
    alert("The event binding is working") // not seeing this alert
    this.selectedRecipe  = recipe;
  }

}

食谱一览component.html

<div class="row">
    <div class="col-xs-12">
    <a class="btn btn-success">New Recipe</a>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <rb-recipe-item [recipe] ="recipe" (click)="OnSelected(recipe)"></rb-recipe-item>
        </ul>
    </div>
</div>

食谱一览component.ts

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

@Component({
  selector: 'rb-recipe-list',
  templateUrl: './recipe-list.component.html'
})
export class RecipeListComponent implements OnInit {

    recipes: Recipe[] = []
    recipe = new Recipe('Test Recipe', 'This description is extremely deceptive ', 'http://www.goodtherapy.org/admin/includes/ckfinder/userfiles/images/empty-seaside-bench.jpg')

    @Output() recipeSelected : EventEmitter<Recipe> =  new EventEmitter<Recipe>()

  constructor() { }

  ngOnInit() {

  }

  OnSelected(recipe: Recipe) {
    console.log("recipe clicked" + this.recipe.name) // seeing this log
    this.recipeSelected.emit(recipe);

  }
}

我看到事件日志点击食谱项目，即在食谱列表组件中调用OnSelected（食谱：食谱）

我没有在食谱组件中看到警报。

任何想法？如果您对我的问题有任何疑问，请随时与我联系。

由于

编辑：我发现了问题：

app.module.ts存在问题我在bootstrap中添加了组件，我不应该这样做。所以我从

更改了文件

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeDetailComponent,
    RecipeListComponent,
    RecipeItemComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent,
              HeaderComponent,
              RecipesComponent,
              RecipeDetailComponent,
              RecipeListComponent,
              RecipeItemComponent]
})
export class AppModule { }

到

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeDetailComponent,
    RecipeListComponent,
    RecipeItemComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

并且事件正在传播。但是我不知道为什么这个改变解决了这个问题。

事件未从子组件到达父组件 - Angular 2

0 个答案: