Question

html代码

<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header" style="text-align: center;">
  <span class="close">&times;</span>
  <h2>Register Account</h2>
</div>
<div class="modal-body">
        <div class="signup-body">
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" target="_blank">Employer</a>
                </div>
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" target="_blank">Candidate</a>
                </div>
        </div>

        <div class="signup-body">
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" class="fa fa-facebook">Login with Faceboo</a>

                </div>
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" target="_blank">Login With Google</a>
                </div>
        </div>

        <div class="signup-body">
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" target="_blank">Login With Linkedin</a>
                </div>
                <div class="su-body" style="background-color:#3B5998;">
                <a href="#" target="_blank">Login With Twitter</a>
                </div>
        </div>

   </div>
   <div class="modal-footer">
        <div class="signup-body">
            <!-- <button>Sign up</button> -->
            <div class="su-body" style="background-color:#3B5998;">
            <a href="#" target="_blank">Sign up</a>
            </div>

        </div>
    <p>Already have ab account</p><a href="#">Login</a>
  </div>
 </div>

</div>

我想创建一个在下面的角度6中给出的注册页面。但是我的问题是，用户可以通过两种方式（雇主或候选人）进行注册，因此我该如何发送Api特定字段数据。请帮助我。

Answer 1

请检查以下解决方案，可能是它可以帮助您观察注册类型：

在HTML中注册的事件：

 <div class="signup-body">
        <div class="su-body" style="background-color:#3B5998;">
        <a href="#" target="_blank" (onclick)="changeReg('Employer')" >Employer</a>
        </div>
        <div class="su-body" style="background-color:#3B5998;">
        <a href="#" target="_blank"  (onclick)="changeReg('Candidate')" >Candidate</a>
        </div>
   </div>

创建数据共享服务

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

@Injectable()
export class DataService {

  private regSource = new BehaviorSubject('Employer'); //Default registration type
  currentReg = this.regSource.asObservable();

  constructor() { }

  changeRegType(regTyp: string) {
    this.regSource.next(regTyp)
  }
}

在提供的HTML组件中设置新注册类型：

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

@Component({
  selector: 'app-registration',
  styleUrls: ['./registration-selection.component.css']
})
export class RegistrationSelectionComponent implements OnInit {

  constructor(private data: DataService) { }

  changeReg(regType:String) {
    this.data.changeRegType(regType);
  }
}

获取注册组件中的默认/新注册类型：

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

@Component({
  selector: 'app-signup',
  template: `
    {{message}}
  `,
  styleUrls: ['./signup.component.css']
})
export class SignUpCmponent implements OnInit {
  regType:string;
  constructor(private data: DataService) { }
  ngOnInit() {
    this.data.currentReg.subscribe(reg => this.regType = reg)
  }
}

如何在Angular 6中选择特定字段

html代码

1 个答案: