如何从组件（<菜单> <！-菜单->）执行功能，并将结果传送到另一个组件？

Question

这个问题似乎与其他问题相似，但是我仍然找不到使我的代码正常工作的答案。我在应用程序中使用路由。我有2个组成部分：MenuComponent和PrincipalComponent。

在MenuComponent中，我有一个菜单（它注入了app.component.html文件中，并显示了动物列表，而PrincipalComponent是我的默认路线，也是我在其中的位置想要在MenuComponent中显示所选动物（单击）。我不知道如何将所选动物的响应发送到PrincipalComponent，并显示所选动物。

这是我的摘要代码，链接中包含我的完整代码：

https://stackblitz.com/edit/angular-to5osq?file=app/menu.component.ts

export class MenuComponent  {
aAnimals=
[
  {"animal":"cat"},
  {"animal":"dog"},
  {"animal":"horse"}
]
Select a animal: <br> <button *ngFor="let item of aAnimals" (click)="getAnimal(item);" style="display:block;">{{item.animal}}</button>
export class PrincipalComponent  {
  animal:any;
  constructor(){

  }

  getAnimal(item){
    console.log(item);
    this.animal=item.animal;
  }
  <h1>animal selected: {{animal}}</h1>

解决此问题将解决许多疑问，当我创建n页并具有向其发送信息的组件时，我可以应用此逻辑。

Answer 1

您需要在<menu>和<router-outlet>中加载的组件之间共享数据。 (activate)发出事件AppComponent，该事件为您提供了在插座中加载的组件的实例。您可以将此实例保存在您的应用程序组件中。然后，使用MenuComponent和PrincipalComponent的事件和父子关系，可以将所选对象的值设置为<router-outlet (activate)='onActivate($event)'></router-outlet> <menu (setAnimal)='setAnimal($event)' ></menu> 。

请参见工作示例here

添加相关代码以供参考。

App.component.html

private activatedComponent;
onActivate(component){
this.activatedComponent = component;
}

setAnimal(item){
    console.log(item)
    this.activatedComponent.animal = item.animal;
}

App.component.ts

@Output() setAnimal: EventEmitter<any>;
constructor(){
  this.setAnimal = new EventEmitter();
}

selectAnimal(item){
  console.log(item);
  this.setAnimal.emit(item);
}

MenuComponent

declare
    cursor c_exam_info is select result1 from exam_info;
begin
    for i IN c_exam_info
    loop 
    if result1>60 then 
    insert into exam_info(result1) values('pass');
    else 
    insert into exam_info(result1) values('fail');
    end if;
    end loop;
end;