Angular 2 Event Emitter

Question

Я получил этот класс:

export class Project {
  $key: string;
  file: File;
  name: string;
  title: string;
  cat: string;
  url: string;
  progress: number;
  createdAt: Date = new Date();

  constructor(file: File) {
    this.file = file;
  }
}

У меня есть компонент загрузки, куда я загружаю всю эту информацию в свою базу данных / хранилище, и она отлично работает.

Затем я показываю все проекты в home.component, как это:

Upload.Service:

 getUploads() {
    this.uploads = this.db.list(`profile/${this.auth.userId}/project`).snapshotChanges().map((actions) => {
      return actions.map((a) => {
        const data = a.payload.val();
        this.showVisualContent(data.url, data.name);
        const $key = a.payload.key;
        const $ref = a.payload.ref;
        return { $key, ...data, $ref };
      });
    });
    return this.uploads;
  }

Дом.Компонент:

 uploads: Observable<Project[]>;

ngOnInit() {
    this.uploads = this.navSrv.getUploads();
    }

Home.html:

 <div *ngFor="let project of uploads | async" class="responsive-width">
  <mat-card-title class="project-card-title">{{project.name}}</mat-card-title>
</div>

Таким образом, я показываю все проекты в home.component. Что я хочу это:

• Я нажимаю на один из проектов в моем home.component.
• Перейти к дочернему компоненту
• Просмотр только информации о проекте по кликам (не для всех проектов).

Я немного знаю об источниках событий (возможно, мне нужно их использовать), но я не знаю, как получить тот проект, на котором я щелкаю, и показывать его в дочернем компоненте. Как Для этого?

getOneProject() { //and pass it to another component

}

Answer 1

Вам не нужен EventEmmiter для этого типа проблемы. EventEmmiters используются, когда вы хотите отправить некоторые данные из дочернего компонента в родительский компонент, а не наоборот.

Как я понял, вы хотите нажать на элемент и перенаправить на компонент только с данными этого конкретного проекта. Для этого типа решения вам потребуется маршрут (например, / projectComponent), и при нажатии на него вы будете перенаправлены (используя routerLink) на этот маршрут с данными проекта, как в этом примере:

<div *ngFor="let project of uploads | async" class="responsive-width">
    <mat-card-title class="project-card-title" [routerLink]="['./projectComponent', project]"> {{project.name}}</mat-card-title>
</div>

Надеюсь, это поможет!

Answer 2

События не могут быть переданы от родителя ребенку, в вашем случае; лучше использовать сервис.

По сути, вам нужно создать компонент из вашего проекта и выполнить итерацию по нему, а затем установить событие щелчка в html для вызова функции, которая устанавливает некоторые данные в службе на основе проекта, по которому щелкнули.

Тогда все, что вам нужно сделать, это перенести эту информацию из службы в ваш дочерний компонент.

Я sudo кодировал основную часть решения:

export class projectHandlerService {
    public projectInfo: any;


    setProjectInfo(info: any) {
        this.projectInfo = info;
    }
}

@Component({//stuff here})
export class Project {
    $key: string;
    file: File;
    name: string;
    title: string;
    cat: string;
    url: string;
    progress: number;
    createdAt: Date = new Date();

    constructor(file: File, private projectHandler: projectHandlerService) {
      this.file = file;
    }

    onClick() {
        this.projectHandler.setProjectInfo(//whatever info you want to pass)
    }
  }

Answer 3

Обычно Project (дочерний) компонент должен иметь свойство input:

import {Component, Input, OnInit} from '@angular/core';

...

export class ProjectComponent implements OnInit {

  @Input("project") project: Project;
  ...
}

И тогда ваш цикл должен привязаться к этому свойству ввода в шаблоне компонента Home:

<div *ngFor="let project of uploads | async" class="responsive-width">
  <mat-card-title class="project-card-title" [project]=project></mat-card-title>
</div>

Таким образом, вы сможете передать свойство project и отобразить его в дочернем компоненте.

В вашем конкретном случае вам не нужно отправлять событие с помощью генератора событий, потому что это используется в том случае, если вы хотите распространить данные от дочернего компонента к его родительскому элементу.

Answer 4

Если компонент Project является дочерним по отношению к компоненту Home, вам не нужен источник событий. Просто используйте декоратор @Input() в шаблоне родителя, чтобы передать все данные, которые требуются в потомке. Вы можете взглянуть на официальную документацию Angular , касающуюся передачи данных от родителя к потомку с привязкой ввода.