想要在单击详细信息按钮时在另一个组件中显示更多数据(角度 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 导航到 incident-detail 组件，现在与此一起我想将事件 component.ts 中的数据发送到 event-detail component.ts，以便我可以在 event-detail.component.html 中绑定数据，有没有办法实现这一点?谢谢

文件夹结构

事件事件详细信息.component.html事件详细信息.component.ts事件.component.html事件.component.ts

事件.component.html

<div class="card-header"><span class="badge">A</span><small>{{incident.Title}}<span class="badge">A</span><small>{{incident.Ticket}}</小><div class="card-footer"><button class="btn btn-sm btn-link"(click)="onLoadActive(incident)">查看详情</button>

事件.component.ts

 import { Component, OnInit } from '@angular/core';从@angular/router"导入{路由器}；从'../../shared/models/incidents.model'导入{事件}；从 '../../shared/services/data- 导入 { DataStorageService }存储服务';@成分({选择器:'app-active-incident',templateUrl: './active-incident.component.html',styleUrls: ['./active-incident.component.css']})导出类 ActiveIncidentComponent 实现 OnInit {详细数据:任何；私人_事件:事件[] = [];公共获取事件():事件[] {返回 this._incidents;}公共集事件(值:事件[]){this._incidents = 值；}构造函数(私有路由器:路由器，私有数据存储服务:数据存储服务) { }ngOnInit() {this.dataStorageService.getIncidents().订阅((数据:事件[])=>{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(数据),console.log(this.incidents);}},(错误:任何)=>控制台日志(错误)，() =>console.log('所有事件都完成了'));}onLoadActive(事件){//一些逻辑this.detailData = 事件；this.router.navigate(['/active-detail']);}

}

事件详细信息.component.html需要从事件组件获取数据

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

事件细节.component.ts想从这里的事件组件获取 this.detailData

import { Component, OnInit } from '@angular/core';@成分({选择器:'app-active-incident-detail',templateUrl: './active-incident-detail.component.html',styleUrls: ['./active-incident-detail.component.css']})导出类 ActiveIncidentDetailComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

解决方案

先创建一个数据共享服务，这里是示例代码，根据需要修改

数据共享服务

import { Injectable } from '@angular/core';从'rxjs/BehaviorSubject'导入{BehaviorSubject}；@Injectable()导出类数据共享服务{私人标题 = 新的 BehaviorSubject("");currentTitle = this.title.asObservable();设置标题(txt:字符串){this.title.next(txt);}}

将此服务注入您的事件组件

数据发送器组件

构造函数(私有数据共享服务:数据共享服务) { }

在导航前在事件组件中您想要的位置使用此服务

this.dataSharingService.setTitle("你的标题或数据");

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

数据接收器组件

title:字符串；构造函数(私有数据共享服务:数据共享服务){}ngOnInit() {this.dataSharingService.currentTitle.subscribe(data => {this.title = 数据；})}

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

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

folder structure

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

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

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

Data sharing service

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

inject this service into your incident component

Data sender component

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

Data receiver component

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

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

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