Angular 2事件发射器

Question

I got this class :

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;
  }
}

I have upload component where I upload all of this information to my database/storage and it works fine.

Then I am showing all of the Projects in home.component like this :

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;
  }

Home.Component :

 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>

In this way I am showing all projects in home.component. What I want is :

• I click on one of the projects in my home.component.
• Go to child component
• See only clicked project information (not all projects).

I know just a little about event emitters (maybe I need to use them), but I don't really know how to get that project on which I click and show it in child component. How To do that ?

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

}

Answer 1

You don't need EventEmmiter for this type of problem. EventEmmiters are used when you want to send some data from Child Component to Parent Component, not the other way around.

As i understood, you want to click on element and redirect to component with only that particular project data. For this type of solution, you will need to have a route (for example /projectComponent) and when you click on you get redirected (using routerLink) to that route with project data like in this example:

<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>

Hope it helps!

Answer 2

If the Project component is a child of the Home component, you don't need an event emitter. Just use the @Input() decorator in the parent's template to pass all the data you require in the child. You can have a look at the official Angular documentation regarding passing data from parent to child with input binding.

Answer 3

Events can't be passed down from a parent to a child, in your case; your better of using a service.

Essentially, you'll want to create a component out of your project and iterate through that, then set a click event in the html to call a function which sets some data in the service based on the clicked project.

Then all you'll need to do is pull that info down from the service into your child component.

I've sudo coded the main part of the solution:

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 4

Basically the Project (child) component should have an input property:

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

...

export class ProjectComponent implements OnInit {

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

And then your loop should bind to this input property in the Home component template:

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

This way you will be able to pass down the project property and render it in the child component.

In your specific case, you do not need to emit an event with an event emitter, because this is used in case you want to propagate data from the child component to its parent.