Javascript 角2事件发射器

我上了这门课：

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

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

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

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

---

如果

项目

组件是

主

组件的子组件，则不需要事件发射器。只需在父级模板中使用

@Input（）

装饰器，即可在子级中传递所需的所有数据。您可以查看有关使用输入绑定将数据从父级传递到子级的说明。

在您的情况下，事件不能从父级传递到子级；你最好使用服务

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

---

基本上，

项目

（子）组件应该有一个输入属性：

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

...

export class ProjectComponent implements OnInit {

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

然后，循环应绑定到主组件模板中的此输入属性：

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

通过这种方式，您将能够传递

项目

属性，并在子组件中呈现它

---

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

对于此类问题，您不需要使用事件发射器。当您希望将一些数据从子组件发送到父组件时，可以使用EventMeter，而不是相反

正如我所理解的，您希望单击元素并重定向到只包含特定项目数据的组件。对于这种类型的解决方案，您需要有一个路由（例如/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>

{{project.name}

---

希望有帮助

如果您可以用代码示例来回答，那就太好了，我会接受它作为答案，因为我可以得到所有项目，如何将它们传递给另一个带有输入输出装饰器的组件？不是全部，只是我点击的。我认为这个答案与我的解决方案最接近，但当我点击mat card时，我会被重定向到projectComponent，那里有所有的项目。是的，我知道你想做什么。您可以只向route传递一个id，而不是整个项目对象。像这样[routerLink]=“['./projectComponent'，project.id]”，然后当您的projectComponent初始化时，您可以获得如下数据：projectId=this.route.snapshot.data['id']；然后进行api调用以获取具有该id的项目，或者您不必进行api调用，您只需要从getUploads（）函数中筛选数据并使用获取的id获取项目。[routerLink]=“['./projectComponent'，project.$key]”-将不起作用，因为我需要按照我的理解将其写入路由器模块。是否将其写入路由器模块？请澄清这一点。对不起，当我转到：www.url.com//468468468（项目密钥）时，我会得到一个空白页，这是正常的，如果我想得到这个项目，我现在需要先从数据库中得到它，并使用它的密钥？还是有别的办法？现在如何在该组件中显示该项目？