Блог

Главная - Вопросы по программированию - Как выполнить функцию из компонента ( ) и чтобы результат был передан другому компоненту?

Как выполнить функцию из компонента ( ) и чтобы результат был передан другому компоненту?

#angular

#angular

Вопрос:

Этот вопрос может показаться похожим на другие, но я все еще не могу найти ответ, который заставит мой код работать. Я использую маршруты в своем приложении. У меня есть 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 страниц и иметь компонент, который отправляет на них информацию.

Комментарии:

1. когда у вас есть маршрутизатор, «классической» идеей является использование параметров маршрутизации, см. angular.io/guide /… . Вы можете увидеть в stackblitz.com/edit/angular-vtg6fp?file=app /… ваша идея работы с маршрутами. ПРИМЕЧАНИЕ: Я вижу, что вы используете Angular 4, почему бы не использовать Angular 7? Angular 7 улучшает Angular 4 и имеет, например, состояние свойства в NavigationExtras, см. netbasal.com /… это может вам помочь

Ответ №1:

Вам нужно заставить обмениваться данными между компонентом, который загружается в router-outlet и <menu> . <router-outlet> Выдает событие (activate) , которое предоставляет вам экземпляр компонента, загруженного в выход. Вы можете сохранить этот экземпляр в своем компоненте приложения. Затем, используя события и отношения родитель-потомок AppComponent и MenuComponent , вы можете установить значение выбранного объекта в PrincipalComponent .

Смотрите рабочий пример здесь

Добавление соответствующего кода для справки.

App.component.html

 <router-outlet (activate)='onActivate($event)'></router-outlet>
<menu (setAnimal)='setAnimal($event)' ></menu>

App.component.ts

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

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

MenuComponent

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

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