Question

我的目标：
我想让用户创建一个新对象，比如说一辆汽车。它分为三个步骤/页面/视图：

有关汽车的信息-带输入的表格（第一页<app-car-create-page1></app-car-create-page1>）
有关当前所有者的信息-带输入的表格（第二页<app-car-create-page2></app-car-create-page2>）
有关新所有者的信息-带输入的表格（第三页<app-car-create-page3></app-car-create-page3>）

问题：
如何将表单数据从app-car-create-page1传递到app-car-create-page2，以及从app-car-create-page2传递到app-car-create-page3？

我的评价
对我来说，最简单的方法是使用state对象并以这种方式设置它：

Page1

@Component({
  selector: 'app-car-create-page1',
  templateUrl: './car-create-page1.component.html',
  styleUrls: ['./car-create-page1.component.scss']
})
export class CarCreatePage1Component implements OnInit {

  carInformationFormGroup = this.fb.group({
    brand: [''],
    model: [''],
    mileage: ['']
  });

  constructor(private fb: FormBuilder, private router: Router) {
  }

  ngOnInit() {
  }

  private navigateToNextPage() {
    this.router.navigateByUrl('/cars/create?pageNr=2',
      {state: {page1FormData: this.carInformationFormGroup}});
  }
}

第2页

@Component({
  selector: 'app-car-create-page2',
  templateUrl: './car-create-page2.component.html',
  styleUrls: ['./car-create-page2.component.scss']
})
export class CarCreatePage2Component implements OnInit {

  private state$: Observable<object>;

  constructor(private router: Router) { }

  ngOnInit() {
    this.state$ =  this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      map(() => this.router.getCurrentNavigation().extras.state)
    );


  }
}

什么给了我：

ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
        Error: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
            at BrowserPlatformLocation.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.BrowserPlatformLocation.pushState (platform-browser.js:610)
            at PathLocationStrategy.push../node_modules/@angular/common/fesm5/common.js.PathLocationStrategy.pushState (common.js:498)
(...)

根据其他在线帖子，这与序列化问题有关。可能可以解决问题的是safe json stringify。

解决我的主要问题的另一种方法是使用ngx-navigation-with-data。

说实话，我是前端的初学者，因此对我来说要做出正确的决定并不容易，因此就提出了问题。

我的方法在那种情况下是否正确？
我应该怎么做才能将表单数据从一个组件传递到另一个组件？
我已经阅读了有关创建服务类的方法，应该将其注入两个组件并从中获取数据。但这绝对不是我的情况。

Answer 1

您可以通过服务执行此操作：

service.ts

private variable = new BehaviorSubject('default val');
varToSend = this.variable.asObservable();

connectVariable(message){
    this.variable .next(message);
}

page1.ts

this.service.connectVariable(varToSend)

page2.ts

this.service.varToSend.subscribe(message => {this.varInPage2= message});

Answer 2

add_action( 'wp_ajax_nopriv_load-products-default', 'prefix_load_default_cat_posts' );
add_action( 'wp_ajax_load-products-default', 'prefix_load_default_cat_posts' );
function prefix_load_default_cat_posts(){

   $slug = $_POST['cat'];

//    echo $slug;

   $args = array(
       'post_type' => 'products',
       'posts_per_page' => 1,
       'category_name' => $slug
   );

    $q = new WP_Query($args);

    if( $q->have_posts()):
        while( $q->have_posts()):

            $q->the_post();

            echo 'post here';

        endwhile;
    endif;

    die();
}

?>

//现在您可以像这样更改汽车对象的值

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
   providedIn: 'root',
})
export class CarService {

  public get car () {
    return this._car.asObservable();
  }
  public set car (next) {
    return this._car.next(next);
  }
  private _car = new BehaviorSubject({});


  constructor() { }
}

一表格三页。如何在它们之间传递状态？

2 个答案: