Question

我有两个分别称为principal和menu的组件。在menu组件中，我有一个json对象和一个html代码，当我单击某个元素时，我希望其中包含一个principal组件中的函数。我希望当我单击此功能时，所选对象显示在principal组件中。我知道这可以在单个组件中完成，但是我正在尝试创建我遇到的一个实际问题的方案。谢谢。

app.component

<menu></menu>
<principal></principal>

menu.component

import { Component, Input } from '@angular/core';
@Component({
selector: 'menu',
template: `Select a animal: <br> <button *ngFor="let item of aAnimals" (click)="getAnimal(item);" style="display:block;">{{item.animal}}</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class MenuComponent  {
 aAnimals=
 [
  {"animal":"cat"},
  {"animal":"dog"},
  {"animal":"horse"}
 ]
 constructor(){

}

principal.component

import { Component, Input } from '@angular/core';
@Component({
  selector: 'principal',
  template: `<h1>animal selected: {{animal}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class PrincipalComponent  {
  animal:any;
  constructor(){

  }
  public getAnimal(item) {
    alert(item)
    this.animal=item.animal;
  }

}

这是我的代码：

https://stackblitz.com/edit/angular-paamqn

这回答了我的问题。最后一个疑问。在我的真实代码中，我是否在<menu>组件内调用principal怎么使它工作？它会改变什么？我不能再使用#principal。

代替

<principal #principal></principal>

直接principal组件的代码html

<!-- html of principal.component.html -->
<menu (callPrincipalMethod)="principal.getAnimal($event)"></menu>
<h1>animal selected: {{animal}}</h1>

Answer 1

您可以通过与EventEmitter相互绑定来实现。

<menu (callPrincipalMethod)="principal.getAnimal($event)"></menu>
<principal #principal></principal>

菜单组件：

import { Component, Input,  Output, EventEmitter } from '@angular/core';
@Component({
selector: 'menu',
template: `Select a animal: <br> <button *ngFor="let item of aAnimals" (click)="getAnimal(item);" style="display:block;">{{item.animal}}</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class MenuComponent  {
 @Output()
 callPrincipalMethod = new EventEmitter()

 aAnimals=
 [
  {"animal":"cat"},
  {"animal":"dog"},
  {"animal":"horse"}
 ]
 constructor(){}

 getAnimal(item) {
  this.callPrincipalMethod.emit(item)
 }
}

stackblitz：https://stackblitz.com/edit/angular-ko2d58

更新

如果menu组件位于principal组件内部，则只需省略principal.getAnimal($event)中的主体

<!-- html of principal.component.html -->
<menu (callPrincipalMethod)="getAnimal($event)"></menu>
<h1>animal selected: {{animal}}</h1>

如何调用组件1的html视图中包含的component2函数？

1 个答案: