Инициировать жизненный цикл второго компонента (компоненты в разных модулях) при каждом нажатии кнопки первого компонента - PullRequest
Новая
       15

Инициировать жизненный цикл второго компонента (компоненты в разных модулях) при каждом нажатии кнопки первого компонента

0 голосов
/ 06 июля 2019

Существует два компонента: 1.) HomeComponent, определенный в HomeModule-> Он содержит 2 входных тега, которые получают данные от пользователя и имеют двустороннюю привязку данных, и кнопку отправки. При нажатии кнопки отправки значения поля ввода устанавливаются в общем сервисе «OrderService». После установки данных тот же метод переходит ко второму компоненту, для загрузки которого (метод жизненного цикла onInit ()) данные извлекаются из серверной службы с помощью метода, определенного снова в «OrderService». Этот метод принимает 2 входных значения, установленных глобально, как описано выше, и вызывает внутреннюю службу, и представление SecondComponent отображается соответствующим образом. 2.) SecondComponent, определенный в SecondModule-> Представление для SecondComponent отображается при загрузке компонента при вызове метода жизненного цикла OnInit (). Оба компонента отображаются на экране в виде вкладок, которые можно переключать между собой. После загрузки данных в SecondComponent, когда мы снова перейдем к HomeComponent (без перезагрузки страницы), введем новые значения в поле ввода и снова нажмем кнопку отправки, новые значения снова будут установлены в общей службе. Но затем при переходе к SecondComponent данные не отображаются, соответствующие новым введенным значениям данных, поскольку компонент не перезагружается снова, поэтому метод OnInit () метода ловушки жизненного цикла больше не будет вызываться. Что можно сделать, чтобы получать данные, связанные с новыми значениями, каждый раз, когда пользователь вводит новые данные. Используемые фиктивные файлы приведены ниже, чтобы получить представление о вышеописанном сценарии:
================================================== ========================== HomeComponent.ts: 

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../order.service';
import { Router } from '@angular/router';

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

  systemType: String;
  idNumber: String;
  constructor(public orderService: OrderService, public router: Router) { }
  ngOnInit() {}
  onSubmit() {
    this.orderService.setOrderDetails(this.systemType, this.idNumber);
    this.router.navigate(['/','second']);
  }
}
=========================================================================
HomeComponent.html : 

<input type="text" [(ngModel)] = "systemType" placeholder=/>
<input type="text" [(ngModel)] = "idNumber"/>
<button (click) = "onSubmit()">Submit</button>
=========================================================================
HomeModule.ts :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [HomeComponent],
  exports: [HomeComponent]
})
export class HomeModule { }
=========================================================================
SecondComponent.ts :

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../order.service';
import { Router } from '@angular/router';

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

  data: any;
  constructor(public orderService: OrderService, public router: Router) { }
  ngOnInit() {
    this.loadDataFromService();
  }

  loadDataFromService() {
    this.orderService.getDataFromBackend().subscribe(data => {
      this.data = data;
    });
  }
}
=========================================================================
 SecondModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecondComponent } from './second.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [SecondComponent],
  exports: [SecondComponent]
})
export class SecondModule { }

=========================================================================
AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { HomeModule } from './home/home.module';
import { SecondModule } from './second/second.module';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HomeModule,
    SecondModule
  ],
  providers: [],
  bootstrap: [HomeComponent]
})
export class AppModule { }

=========================================================================
App-Routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
    {path: 'home', component: HomeComponent},
    {path: 'second', component: SecondComponent},
    {path: '', redirectTo: 'home',pathMatch: 'full' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports:[RouterModule],
  declarations: []
})

export class AppRoutingModule {}
=========================================================================
OrderService.ts : 

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

@Injectable({
  providedIn: 'root'
}
export class OrderService {

  systemType: String;
  idNumber: String;

  constructor(public orderService: OrderService, private http: Http,private httpClient: HttpClient) { }

  setOrderDetails(systemType: String, idNumber: String) {
    this.systemType = systemType;
    this.idNumber = idNumber;
  }
  getDataFromBackend() {
    let data = {};
    data['systemType'] = this.systemType;
    data['idNumber'] = this.idNumber;
    return this.httpClient.post('http://localhost:8080/rest/getData',JSON.stringify(data));
  }
}
=========================================================================

Основным требованием является получение новых данных в соответствии со значениями, заданными из первого компонента, в общую службу нажатием кнопки. И показать полученные данные во второй компонент. Каждый раз, когда пользователь вводит новые значения, новые данные должны выбираться без перезагрузки страницы. Данные всегда должны загружаться при загрузке второго компонента, поэтому используется метод жизненного цикла. Так что обмен данными между компонентами с использованием общей службы был опробован, но даже это не сработало бы, потому что подписка будет происходить методом lifecyle.

...