我如何在Angular中与其他组件共享数据？

Question

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

我想通过使用路由在组件之间共享数据。 当我尝试编译时出现以下错误： NewTasksComponent.html:13 ERROR TypeError：无法读取未定义的属性“new_tasks”

我该如何解决这个问题？

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>

Answer 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.component.ts调用此方法调用get data

然后从task.ts调用该方法

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

而已

参考

Angular services

Answer 2

有许多不同的方法来实现这一目标：https://www.youtube.com/watch?v=I317BhehZKM