Как выбрать конкретное поле в Angular 6

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)
  }
}