要在单击“详细视图"按钮时在另一个组件中显示更多数据(角度6) [英] want to show more data in another component when view in detail button is clicked (angular 6)

问题描述

我是angular6的新手，请不要认为这个问题重复，因为到目前为止我无法找到相关的答案，我有2个组成部分 incident Component 和 incident-detail组件，(事件详细信息组件位于事件组件内部)，我已经从 incident.component.ts 中的api提取了数据，现在有一个名为查看详细信息的按钮在 incident.component.html 中，单击视图详细信息"按钮时，它现在将使用 router.navigate 导航到事件详细信息组件.我想将突发事件component.ts中的数据发送到突发事件detail.component.ts中，以便可以将数据绑定到identity-detail.component.html中，有什么方法可以实现呢?谢谢

I am new to angular6, Please do not consider this question as duplicated, as i could not able to find relevant answer so far, I have 2 components incident Component and incident-detail component, (incident-detail component is inside incident component) I have fetched data from api in incident.component.ts now I have a button called view details in incident.component.html when clicked the view detail button it will navigate to incident-detail component using router.navigate, now along with this I want send data which is in incident component.ts to incident-detail component.ts so that I can bind data in incident-detail.component.html, Is there a way where I can achieve this? Thanks

文件夹结构

incident
  incident-detail.component.html
   incident-detail.component.ts
 incident.component.html
  incident.component.ts

incident.component.html

incident.component.html

<div class="card" *ngFor="let incident of incidents; let i = index"> 
<div class="card-header">
<span class="badge">A</span><small>{{incident.Title}}
<span class="badge">A</span><small>{{incident.Ticket}} 
</small>
<div class="card-footer">
<button class="btn btn-sm btn-link" 
(click)="onLoadActive(incident)">View in Detail</button>
</div>
</div>
</div>

incident.component.ts

incident.component.ts

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { Incidents } from '../../shared/models/incidents.model';
  import { DataStorageService } from '../../shared/services/data- 
  storage.service';

  @Component({
  selector: 'app-active-incident',
  templateUrl: './active-incident.component.html',
  styleUrls: ['./active-incident.component.css']
  })
  export class ActiveIncidentComponent implements OnInit {

  detailData: any;

  private _incidents: Incidents[] = [];
  public get incidents(): Incidents[] {
  return this._incidents;
  }
  public set incidents(value: Incidents[]) {
  this._incidents = value;
  }

  constructor(private router: Router, private dataStorageService: 
  DataStorageService) { }

 ngOnInit() {
  this.dataStorageService.getIncidents()
  .subscribe(
    (data: Incidents[]) => {
      for (let i = 0; i < data.Events.length; i++) {
        const quoteReplaceData = data.Events[i].replace(/'/g, '"');
        const objIdRemove = quoteReplaceData.replace(quoteReplaceData.substr(quoteReplaceData.indexOf('\"_id\": ObjectId'), 44), '');
        this.incidents.push(JSON.parse(objIdRemove)); // JSON.parse(data),
       console.log(this.incidents);
      }
    },
    (err: any) => console.log(err),
    () => console.log('All done getting incidents')
  );
}

onLoadActive(incident) {
  // some logic
  this.detailData = incident;
  this.router.navigate(['/active-detail']);

}

}

incident-detail.component.html 需要从事件组件中获取数据

incident-detail.component.html need to get data from incident component

 <div class="card"> 
<div class="card-header">
<span class="badge">A</span><small>{{incident.Title}}
<span class="badge">A</span><small>{{incident.Ticket}} 
</small>
</div>
</div>

incident-detail.component.ts 想要从事件组件中获取this.detailData

incident-detail.component.ts want to get this.detailData from incident component here

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

@Component({
  selector: 'app-active-incident-detail',
  templateUrl: './active-incident-detail.component.html',
  styleUrls: ['./active-incident-detail.component.css']
})
export class ActiveIncidentDetailComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }
}

推荐答案

首先创建一个数据共享服务，下面是示例代码，您应根据需要进行修改

Create a data sharing service first, here's sample code, you should modify according to your need

数据共享服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataSharingService {
    private title = new BehaviorSubject<string>("");
    currentTitle = this.title.asObservable();

    setTitle(txt: string){
        this.title.next(txt);
    }
}

将此服务注入事件组件

数据发送者组件

constructor(
    private dataSharingService: DataSharingService
  ) { }

在导航之前在事件组件中的任何位置使用此服务

use this service where you want in your incident component before navigation

this.dataSharingService.setTitle("Your title or data");

现在，您肯定希望将数据接收到事件详细信息组件中，因为这是示例代码

Now you surely want to receive data into your incident detail component, for that here's sample code

数据接收器组件

title: string;
  constructor(private dataSharingService: DataSharingService ) { }

  ngOnInit() {
    this.dataSharingService.currentTitle.subscribe(data => {
      this.title = data;
    })
  }

注意:请根据您的要求进行修改，该服务是我设置并获得的string标题.此服务对于独立的组件很有用，没有任何子母关系.

Note: Please modify according to your requirement, this service I made to set and get string title. This service is useful for independent components, without any child-parent relationship.

这篇关于要在单击“详细视图"按钮时在另一个组件中显示更多数据(角度6)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！