Angular 2 事件发射器答案

【问题标题】：Angular 2 event emitterAngular 2 事件发射器
【发布时间】：2018-04-30 15:28:56
【问题描述】：

我上了这门课：

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 中显示所有项目，如下所示：

上传服务：

 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>

通过这种方式，我展示了 home.component 中的所有项目。我想要的是：

我单击 home.component 中的一个项目。
转到子组件
仅查看点击的项目信息（不是所有项目）。

我对事件发射器知之甚少（也许我需要使用它们），但我真的不知道如何获取我单击的项目并将其显示在子组件中。怎么做？

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

}

【问题讨论】：

标签： javascript angular typescript firebase

【解决方案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>

希望对你有帮助！

【讨论】：

我认为这个答案是最接近我的解决方案的答案，但是当我点击 mat-card 时，我仍然被重定向到 projectComponent 并且有所有项目。
是的，我明白你想做的事。您可以只传递一个 id 来路由，而不是整个项目对象。像这样 [routerLink]="['./projectComponent', project.id]" 然后当你的 projectComponent 初始化时，你可以得到这样的数据 this.projectId= this.route.snapshot.data['id'];并进行 api 调用以获取具有该 id 的项目，或者您不必进行 api 调用，您只需从 getUploads() 函数中过滤数据并获取具有获取 id 的项目。
[routerLink]="['./projectComponent', project.$key]" - 不起作用，因为我需要按照我的理解将它写在我的路由器模块中。
写入路由器模块？请澄清这一点。
对不起，当我去： www.url.com/-468468468 (project key) 时，我得到空白页，这是正常的，如果我想得到 this.project 我需要从数据库首先是它的关键？还是有其他方法？现在如何在该组件中显示该项目？

【解决方案2】：

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

【讨论】：

如果你能用代码示例来回答，那就太好了，我会接受它作为答案，因为我可以获得所有项目，如何使用 Input Output 装饰器将它们传递给另一个组件？不是全部，只有我点击的。

【解决方案3】：

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

基本上，您需要从项目中创建一个组件并对其进行迭代，然后在 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)
    }
  }

【讨论】：

【解决方案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属性并在子组件中渲染它。

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

【讨论】：