중포 기지 라우팅

나는 다음과 같은 문제가있다 :중포 기지 라우팅

프로파일 세부 사항 (적용된 CSS없이) 내 사회적 버튼 로그인 페이지
내 등록 페이지는 응용 프로그램 내 모듈의

버전을 원했다

Angular CLI: 1.6.0 
Node: 8.6.0 
OS: linux x64 
Angular: 5.1.0 
... animations, common, compiler, compiler-cli, core, forms 
... http, platform-browser, platform-browser-dynamic, router 

@angular/cdk: 5.0.1 
@angular/cli: 1.6.0 
@angular/flex-layout: 2.0.0-beta.10-4905443 
@angular/material: 5.0.1 
@angular-devkit/build-optimizer: 0.0.35 
@angular-devkit/core: 0.0.22 
@angular-devkit/schematics: 0.0.41 
@ngtools/json-schema: 1.1.0 
@ngtools/webpack: 1.9.0 
@schematics/angular: 0.1.10 
@schematics/schematics: 0.0.10 
typescript: 2.4.2 
webpack-bundle-analyzer: 2.9.1 
webpack: 3.10.0

그리고 login.component.ts의 코드 : 나는 무엇을 시도했다

export class LoginComponent implements OnInit { 

    ... 

    constructor(private authService: AuthService, private router: Router) {} 

    ... 

    loginWith(mode: string) { 
    return this.authService.loginWith(mode).then((data) => { 
     if(data.additionalUserInfo.isNewUser) { 
     this.router.navigate(['register', {mode: mode}]).catch(error => { 
      console.log("Navigate ERROR", error); 
     }); 
     } 
     else { 
     this.router.navigate(['']); 
     } 
    }); 
}

그리고 auth.service.ts

import { Injectable } from '@angular/core'; 
import { Store } from '@ngrx/store'; 

import { AngularFireAuth } from 'angularfire2/auth'; 
import * as firebase from 'firebase/app'; 

import { login, logout } from './auth.reducer'; 

@Injectable() 
export class AuthService { 

    constructor(private afAuth: AngularFireAuth, private store: Store<any>) {} 
    public redirectUrl: string; 


    /** 
    * Logs in the user 
    * @returns {firebase.Promise<FirebaseAuthState>} 
    */ 
    loginWithEmailAndPassword(email: string, password: string) { 
    return this.afAuth.auth.signInWithEmailAndPassword(email, password).then((data) => { 
     this.store.dispatch(login(data)); 
     return data; 
    }); 
    } 

    loginWith(mode : string) { 
    return this.afAuth.auth.signInWithPopup(new this.afAuth.auth[mode + 'AuthProvider']()).then((data) => { 
     this.store.dispatch(login(data)); 
     return data; 
    }); 
    }

의 코드 :

내 모든 애니메이션의 표시를 억제합니다.

결과는 동일 :

직접 m 사이의 혼합 내 등록 페이지 OK, 내가 얻은 적이 있었다

Ngrx의

사용을

loginWith(mode: string) { 
    this.router.navigate(['register', {mode: mode}]); 
}

결과를 라우팅

최종 결과가 아니며 구성 요소의 동작을 확인하는 데 사용됩니다.

import { Store } from '@ngrx/store'; 

import { AuthService } from '../auth.service'; 
import { selectorAuth } from '../auth.reducer'; 
... 
export class LoginComponent implements OnInit { 
... 
    constructor(private authService: AuthService, private router: Router, private store: Store<any>) {} 

    ngOnInit() {} 

    loginWith(mode: string) { 
    this.store 
     .select(selectorAuth) 
     .subscribe(auth => { 
     if(auth.isAuthenticated) { 
      if(auth.payload.additionalUserInfo.isNewUser) { 
      this.router.navigate(['register', {mode: mode}]).catch(error => { 
       console.log("Navigate ERROR", error); 
      }); 
      } 
     } 
     }); 

    return this.authService.loginWith(mode); 
    } 
... 
}

결과는 KO했다 : 두 페이지 사이에 항상 믹스

내가 뭔가를 놓친 적이 있지만 내가 어디 있는지 무엇을, 그래서 누군가가 도울 수 있다면, 사전에 감사하지 않는 생각 .

출처

2017-12-13 Fabrice Bazzaro

As이 게시물에 대답이 리디렉션 functionnal를 만들기 위해 NgZone를 사용할 필요가 그래서 리디렉션의 호출이 각도 범위에 was'nt ngrx store does not update UI after dispatched action from firebase promise

그래서 내 코드는 지금 :

loginWith(mode: string) { 
    return this.authService.loginWith(mode).then((data) => { 
     if(data.additionalUserInfo.isNewUser) { 
     this.zone.run(() => { 
      this.router.navigate(['register', {mode: mode}]); 
      }); 
     }); 
     } 
     else { 
     this.router.navigate(['']); 
     } 
    }); 
    }

출처

2017-12-14 14:15:41

중포 기지 라우팅

답변

관련 문제