Question

我有一个navbar-login（导航栏中的登录表单）和一个页面登录（一个可以路由到登录表单的页面）。 navbar-login-form和page-login-form通过服务进行双向绑定（请参阅下面的第一个codebit）。

我想要的是以下流程：

用户在navbar-login
单击“提交”按钮，凭据将发送到login.service
如果凭据错误，服务将路由到显示凭据的登录页面

如果已经显示页面登录，则与服务的双向绑定正常工作。但如果没有显示，我输入凭据并按下按钮，它只会路由到页面登录但不会传递凭据。

我正在使用以下服务让navbar-login和页面登录相互通信（跨“不相关”组件的双向绑定）：

export class LoginNav2PageService {

    viewerChange: EventEmitter<{email:string,password:string}> = new EventEmitter();
    constructor() {}
    emitNavChangeEvent(user:{email:string,password:string}) {
        this.viewerChange.emit(user);
    }
    getNavChangeEmitter() {
        return this.viewerChange;
    }
}

这是navbar组件，pass2page与HTML输入中的keyup事件挂钩：

export class LoginNavbarComponent {
    user:= {email:'',password:''};

    constructor(private _loginNav2pageService:LoginNav2PageService, private _loginService:LoginService){}

    pass2page(){
        this._loginNav2pageService.emitNavChangeEvent(this.user);
    }

  onNavbarLoginBtn(){
    this._loginService.onNavbarLogin(this.user);
  }
}

这是页面登录组件中的监听器：

export class LoginPageComponent implements OnInit{
    user= {email:"", password:""};
    subscription:any;

    constructor(private _loginNav2pageService:LoginNav2PageService){}

    ngOnInit():any{
        this.subscription = this._loginNav2pageService.getNavChangeEmitter().subscribe(user => this.setViewer(user));
    }

    setViewer(user:{email:string, password:string}){
        this.user = user;
    }
}

最后是loginService：

export class LoginService{
  constructor(private _router:Router, private _loginNav2pageService:LoginNav2PageService){}
  //login User from Navbar
  onNavbarLogin(user:LoginUserInterface){
    //login and routing if successful
    if(user.email === 'name' && user.password === '1234'){
      console.log("Login Success");
      //route to platform
    }
    //else route to login page to show validation errors to users
    else {
      this._router.navigate(['Login']);
      this._loginNav2pageService.emitNavChangeEvent(user);
      console.log("wrong credentials");
    }
  }
}

Answer 1

经过一夜安眠后我发现了:)，上面的代码是我之前在其他一些部分改编的片段，并为此复杂化....

现在我只是使用ngAfterViewInit生命周期挂钩从服务中获取数据。

谢谢！

完成路由后，将数据传递给组件

1 个答案: