общаться между формой входа и компонентом заголовка - PullRequest
Новая
       22

общаться между формой входа и компонентом заголовка

0 голосов
/ 26 июня 2018

Я создаю веб-сайт под углом 6

В моем проекте пользователь может быть 3 типа: администратор, компания, клиент.

В моем компоненте заголовка у меня есть 3 меню под ngIf, которыедолжны быть показаны в соответствии с вашими данными для входа.

Каким-то образом я не могу установить связь между этими двумя компонентами и запустить функцию заголовка , чтобы изменить представление. также не работал с моей службой.

I 'Я опубликую часть кода здесь и надеюсь, что кто-нибудь поможет мне:) 

// header component: 
export class HeaderComponent implements OnInit {

  guestMenu: boolean = true;
  adminMenu: boolean = false;
  companyMenu: boolean = false;
  customerMenu: boolean = false;

  //change site view to admin
  admin() {
    this.adminMenu = true;
    this.companyMenu = false;
    this.customerMenu = false;
    this.guestMenu = false;
  }
  //change site view to company
  company() {
    this.adminMenu = false;
    this.companyMenu = true;
    this.customerMenu = false;
    this.guestMenu = false;
  }
  //change site view to customer
  customer() {
    this.adminMenu = false;
    this.companyMenu = false;
    this.customerMenu = true;
    this.guestMenu = false;
  }
  constructor() {}

  ngOnInit() {

  }

}


// login component: 


export class LoginComponent implements OnInit {


  constructor(private dataService: DataService) {}

  loginUser(username, password, type) {
    console.log(username.value, password.value, type.value);
    switch (type.value) {

      case "ADMIN":
        {
          this.dataService.getLoginResponse(username.value, password.value,
            type.value).subscribe(res => {})
        }
        break;

      case "COMPANY":
        {
          this.dataService.getLoginResponse(username.value, password.value,
            type.value).subscribe(res => {})
        }
        break;
      case "CUSTOMER":
        {
          this.dataService.getLoginResponse(username.value, password.value,
            type.value).subscribe(res => {})
        }
        break;
    }
  }

  ngOnInit() {}

}

1 Ответ

0 голосов
/ 26 июня 2018

Я бы создал службу аутентификации, которая бы выполняла роль промежуточного уровня между двумя компонентами и осуществляла связь, используя rxjs / Subject. 

import { Subject, Observable } from 'rxjs';

export class AuthenticationServce {
    userType$: Observable<string>;
    private userType: Subject<string>;

    constructor() {
        this.userType = new Subject<string>();
        this.userType$ = this.userType.asObservable();
    }

    public updateUserType(userType: string): void {
        this.userType.next(userType);
    }
}

В вашем login.component: 

constructor(
    private dataService: DataService,
    private authenticationService: AuthenticationService,
) { }

loginUser(username, password, type): void {
    ...
    this.authenticationSubject.updateUserType(type.value);
    ...
}

И, наконец, в вашем header.component: 

constructor(private authenticationService: AuthenticationService) {
    this.authenticationService.userType$.subscribe(userType => {
        switch (userType) {
            case "ADMIN":
                this.admin();
                break;
            // Other case statements
        }
    });
}
...