如何将数据共享到 Angular 中的另一个组件？

Posted 2023-02-23

【中文标题】如何将数据共享到 Angular 中的另一个组件？

【英文标题】：How I can share data to another component in Angular?

【发布时间】：2019-09-10 22:19:35

【问题描述】：

在 Angular 7 中的组件之间共享数据

我想通过路由在组件之间共享数据。 当我尝试编译时出现以下错误：NewTasksComponent.html:13 ERROR TypeError: Cannot read property 'new_tasks' of undefined

我该如何解决这个问题？

get-data.service.ts

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';

@Injectable(
  providedIn: 'root'
)
export class GetDataService 
  constructor(private http : HttpClient)  
  public shareddata : any;
  get_data()
        this.http.get("https://raw.githubusercontent.com/MalishBob/WowworksTest1/master/works.json").subscribe((data) => 
            this.shareddata = data;
        );
    

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  HttpClientModule  from '@angular/common/http';
import  RouterModule, Routes from '@angular/router';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  NewTasksComponent  from './components/new-tasks/new-tasks.component';

const appRoutes: Routes = [
  path: 'newtasks', component:NewTasksComponent
]

@NgModule(
  declarations: [
    AppComponent,
    NewTasksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule
  ],
  providers: [GetDataService],
  bootstrap: [AppComponent]
)
export class AppModule  

app.component.ts

import  Component  from '@angular/core';
import  GetDataService  from './get-data.service';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
)
export class AppComponent 
    constructor()  

app.component.html

<div class="content">
  <div class="wrapper wrap-menu">
    <div class="add"></div>
    <div class="menu">
      <ul>
        <li>
          <a [routerLink]="['/newtasks']">
            New
            <span class="num_status">123</span>
          </a>
        </li>
        <li>
         .....
        </li>
      </ul>
    </div>
  <router-outlet></router-outlet>
  </div>

new-tasks.component.ts

import  Component, OnInit  from '@angular/core';
import  GetDataService  from '../../get-data.service';

@Component(
  selector: 'app-new-tasks',
  templateUrl: './new-tasks.component.html',
  styleUrls: ['./new-tasks.component.css']
)
export class NewTasksComponent implements OnInit
  constructor(private dataservice: GetDataService )  
  works: any;
  ngOnInit() 
    this.works = this.dataservice.shareddata
  

new-tasks.component.html

<div class="wrapper wrap-table">
  <table>
    <thead>
      <tr>
        <th style="width: 10%;">ID</th>
        <th style="width: 15%;">City</th>
        <th style="width: 50%;">Name</th>
        <th style="width: 15%;">Time</th>
        <th style="width: 10%;">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let work of works.new_tasks">
        <td>work.id</td>
        <td>work.city</td>
        <td>work.description</td>
        <td>work.time_to</td>
        <td>work.amount</td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

你在路由解析前是否使用app-new-tasks？

不，我不在路由前使用 app-new-tasks。我发现我的代码中有任何错误（问题中没有显示）并且错误消失了。但是来自 json 的数据不会显示在浏览器中。

【参考方案1】：

你必须使用服务

从 app.component.ts

中删除您的 http 请求

创建一个新服务并创建一个名为get_data()的方法

public shareddata : any;
 get_data()
    this.http.get("https://raw.githubusercontent.com/MalishBob/WowworksTest1/master/works.json") .subscribe((data) => 
    this.shareddata = data;
);

并从 app.compnent.ts 调用这个名为 get_data 的方法

然后调用task.ts中的方法

ngOnInit() 
    this.work = this.dataservice.shareddata
  

就是这样

参考

Angular services

【讨论】：

导入您生成的服务，就像导入组件一样

导入 service_name '../services/servicename.ts';

【参考方案2】：

有很多不同的方法可以实现这一点：https://www.youtube.com/watch?v=I317BhehZKM