javascript - Angular:如何将用户搜索输入数据传输到另一个组件并从搜索结果创建列表？

Question

我希望有人可以帮助我，首先我不太擅长 Angular(第一个项目)。我在应用程序中使用 Angular 8 作为我的前端。

我尝试创建一个 html 页面(...stuff/searches)，用户可以在其中输入搜索条件来查找 Stuff。然后，用户的输入应该被传输到另一个 html 页面(...stuff/searches/list)。在那里，我尝试为后端调用一个方法来在数据库中运行搜索，并向我返回符合用户搜索条件的内容。我想将收到的东西放入 list 中。我的后端可以很好地处理调用(使用 Postman 进行测试)。我尝试从本页上的另一个问题将我的数据导出到“service.ts”并从那里获取它，但不知何故它不起作用。

stuff-search.component.html

  <div [hidden]="submitted">
    <h1>Stuff Search</h1>
    <form (ngSubmit)="onSubmit()" #stuffForm="ngForm">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" [(ngModel)]="model.name" name="name">
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <input type="text" class="form-control" id="description"  [(ngModel)]="model.description" name="description">
      </div>

      <div class="form-group">
        <label for="rating">Rating</label>
        <select class="form-control" id="rating" required  [(ngModel)]="model.rating" name="rating">
          <option *ngFor="let rating of ratings" [value]="rating">{{rating}}</option>
        </select>
      </div>

      <div class="form-group">
        <label for="birth_date">Birth date</label>
        <input type="date" class="form-control" id="birth_date"  [(ngModel)]="model.birthDate" name="birthDate">
      </div>

      <button type="submit" class="btn btn-success" href="/stuff/searches/list">Search</button>


    </form>
  </div>
</div>

stuff-search.component.ts

import {StuffService} from '../../service/stuff.service';
import {ActivatedRoute} from '@angular/router';
import {Stuff} from '../../dto/stuff';
import {DataService} from '../../service/data.service';

@Component({
  selector: 'app-stuff-search',
  templateUrl: './stuff-search.component.html',
  styleUrls: ['./stuff-search.component.scss']
})
export class StuffSearchComponent{

  ratings = [1, 2, 3, 4, 5];

  id: number;
  private sub: any;

  constructor( private stuffService: StuffService, private route: ActivatedRoute, private dataService: DataService) {
  }

  stuff: any;
  submitted = false;
  model = new Stuff('', '', null, '');

  private searchStuff(stuff) {
    this.stuffService.searchStuff(stuff).subscribe(
      (stuffs: Stuff) => {
        this.model = stuffs;
      },
      error => {
        // this.defaultServiceErrorHandling(error);
      }
    );
  }

  onSubmit() {
    this.submitted = true;
    this.dataService.setData(this.model);
  }

}

stuff-list.component.html

import {Component, OnInit} from '@angular/core';
import {StuffService} from '../../service/stuff.service';
import {DataService} from '../../service/data.service';
import {Stuff} from "../../dto/stuff";


@Component({
  selector: 'app-stuff-list',
  templateUrl: './stuff-list.component.html',
  styleUrls: ['./stuff-list.component.scss']
})
export class StuffListComponent implements OnInit {

  constructor(private stuffService: StuffService, private dataService: DataService) {
  }
  model = new Stuff('', '', null, '');
  stuffs: any;

  onRefresh() {
    // this.ngOnInit();
  }

  ngOnInit() {
    // tslint:disable-next-line:max-line-length
    this.stuffService.searchStuff(this.dataService.getData()).subscribe(stuffs => this.stuffs= stuffs);
  }

  deleteStuff(id, position) {
    console.log('Delete stuff');
    this.stuffService.deleteStuff(id).subscribe(t => this.onRefresh());
  }
}

stuff-list.component.ts

import {StuffService} from '../../service/stuff.service';
import {DataService} from '../../service/data.service';
import {Stuff} from "../../dto/stuff";


@Component({
  selector: 'app-stuff-list',
  templateUrl: './stuff-list.component.html',
  styleUrls: ['./stuff-list.component.scss']
})
export class StuffListComponent implements OnInit {

  constructor(private stuffService: StuffService, private dataService: DataService) {
  }
  model = new Stuff('', '', null, '');
  stuffes: any;

  onRefresh() {
    // this.ngOnInit();
  }

  ngOnInit() {
    // tslint:disable-next-line:max-line-length
    this.stuffService.searchStuff(this.dataService.getData()).subscribe(stuffes=> this.stuffes= stuffes);
  }

  deletesStuff(id, position) {
    console.log('Delete stuff');
    this.stuffService.deleteStuff(id).subscribe(t => this.onRefresh());
  }
}

data.service.ts

import { Injectable } from '@angular/core';
import {Stuff} from '../dto/stuff';


// To Transfer the Data from the UserInput Search (stuff-search) to stuff-list
@Injectable()
export class DataService {
  public stuff: Stuff;

  constructor() {
  }

  setData(stuff) {
    this.stuff= stuff;
  }
  getData() {
    return this.stuff;
  }
}

每一个提示/帮助将不胜感激。我试了一整天。也许这只是一个小错误，我找不到它。

非常感谢。

Answer 1

您不应在链接 (stuff-search.component.html) 上使用 href。请改用 routerLink 或 router.navigate 方法。当您使用 href 导航到另一个页面时，由于应用程序重新初始化，您的数据将会丢失。单页应用程序( Angular )的技巧是您可以在不重新加载页面的情况下导航它。可能这就是您遇到的问题。

请阅读此https://angular.io/guide/router#router-links

此外，我建议传递给服务而不是您正在使用的对象，但它是克隆副本。这样可以避免一些可能发生的不可预测的事情。

this.dataservice.setData(cloneDepp(this.model))

cloneDepp 正在从 lodash lib 导入，您已经在项目中拥有它