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

如果Project组件是Home组件的子组件，则不需要事件发射器。只需使用父模板中的@Input()装饰器即可传递子级中所需的所有数据。您可以查看official Angular documentation关于通过输入绑定从父级传递数据的问题。

Answer 3

在您的情况下，事件不能从父母传递给孩子;你更善于使用服务。

基本上，您希望从项目中创建一个组件并迭代它，然后在html中设置一个click事件来调用一个函数，该函数根据所单击的项目在服务中设置一些数据。 / p>

然后，您需要做的就是将该信息从服务中提取到您的子组件中。

我已经对解决方案的主要部分进行了编码：

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

基本上Project（子）组件应该有一个输入属性：

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属性并在子组件中呈现它。

在您的特定情况下，您不需要使用事件发射器发出事件，因为如果您希望将数据从子组件传播到其父组件，则使用此事件。

Angular 2事件发射器

4 个答案: