Question

有两个组件：1.）在HomeModule->下定义的HomeComponent，它包含2个输入标签和2个提交标签，这些输入标签从用户那里获取数据并以2种方式绑定数据。单击提交按钮后，将在共享服务“ OrderService”中设置输入字段值。设置数据后，相同的方法导航到第二个组件，该组件通过“ OrderService”中再次定义的方法从后端服务获取其加载数据（生命周期方法onInit（））。该方法采用如上所述全局设置的2个输入值，并调用后端服务，并相应地呈现SecondComponent的视图。 2.）在SecondModule->下定义的SecondComponent，在调用OnInit（）生命周期方法时在加载组件时呈现SecondComponent的视图。这两个组件都在屏幕上显示为选项卡，可以在它们之间进行切换。在SecondComponent中加载数据之后，当我们再次导航到HomeComponent（不重新加载页面），并输入新的输入字段值并再次单击Submit按钮时，将在共享服务中再次设置新值。但是，随后导航到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));
  }
}
=========================================================================

基本要求是，通过单击按钮，根据从第一个组件到共享服务中设置的值获取新数据。并将接收到的数据显示为第二部分。每次用户输入新值时，都应在不重新加载页面的情况下获取新数据。数据应始终加载在第二个组件的加载上，以便使用生命周期方法。因此，已经尝试过使用共享服务在组件之间共享数据，但即使这样也无法解决，因为订阅将以生命周期方法进行。

在第一个组件上单击按钮时，将启动第二个组件生命周期（不同模块中的组件）

0 个答案: