Question

我有页眉和页脚作为单独的角度组件。当用户注销时，在标题上我只显示徽标和“登录”div但是当用户登录时，我动态地向标题添加元素，并通过自定义指令在标题模板中完成。因此，当登录并从localhost：4200 / signin重定向到localhost：4200 / profile时，我希望添加标头组件上的元素但是在第一次重定向时没有发生，但只有当我以登录用户重新加载localhost：4200 / profile时才会发生。

指令的一部分：

  condition: boolean;


  ngOnInit() {
    const isAuthenticated = this.authService.isAuthenticated().subscribe(
      (isAuthenticated) => {
        if (isAuthenticated && this.condition || !isAuthenticated && !this.condition ) { 
           this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      }
    );

    }


  @Input() set showAuthed(condition: boolean) {
    this.condition = condition;
  }

}

**Part of header template: showAuthed - directive **

<div class="menu">



    <div class="logo-place">
      <img routerLink="/" class="logo" src="../assets/logo-colored.svg" width="150px" height="28px"> </div>

    <div class="unauth" *showAuthed="false">


      <div *ngIf="routeIsActive('/register') || routeIsActive('/signup-outs') || routeIsActive('/signup-client')" class="login"
        routerLink="/signin" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" style="cursor: pointer;">
        Sign in
      </div>

      <div *ngIf="routeIsActive('/signin')" class="register" routerLink="/register" routerLinkActive="active" style="cursor: pointer;">
        Register
      </div>

    </div>

    <!-- Show this for logged in users -->
    <div class="auth" *showAuthed="true" >

这是auth服务的主要部分：

var cognitoUser = userPool.getCurrentUser();



@Injectable()
export class AuthService {
  authIsLoading = new BehaviorSubject<boolean>(false);
  authDidFail = new BehaviorSubject<boolean>(false);
  authStatusChanged = new Subject<boolean>();
  registeredUser: CognitoUser;

  constructor(private router: Router) {
  }

// USER SIGN-IN


  signIn(username: string, password: string): void {
    this.authIsLoading.next(true);
    const authData = {
      Username: username,
      Password: password
    };
    const authDetails = new AuthenticationDetails(authData);
    const userData = {
      Username: username,
      Pool: userPool
    };
    const cognitoUser = new CognitoUser(userData);
    const that = this;
    cognitoUser.authenticateUser(authDetails, {
      onSuccess (result: CognitoUserSession) {
        that.authDidFail.next(false);
        that.authIsLoading.next(false);
        that.authStatusChanged.next(true);
        that.router.navigateByUrl('/profile', { skipLocationChange: false })


      },
      onFailure(err) {
        that.authDidFail.next(true);
        that.authIsLoading.next(false);
        console.log(err);

      }
    });

    this.authStatusChanged.next(true);  // create user with cognito data


  }


  getAuthenticatedUser() {
    return  userPool.getCurrentUser()
  }


  logout() {

    this.authStatusChanged.next(false);
    this.getAuthenticatedUser().signOut();
    this.router.navigateByUrl('/signin')
  }

  isAuthenticated(): Observable<boolean> {
    const user = this.getAuthenticatedUser();
    const obs = Observable.create((observer) => {
      if (!user) {
        observer.next(false);
      } else {
        user.getSession((err, session) => {
          if (err) {
            observer.next(false);
          } else {
            if (session.isValid()) {
              observer.next(true);
            } else {
              observer.next(false);
            }
          }
        });
      }
      observer.complete();
    });
    return obs;
  }

  initAuth() {
    this.isAuthenticated().subscribe(
      (auth) => this.authStatusChanged.next(auth)

    );
  }


}

我的标题组件

export class HeaderComponent implements OnInit {

  showSignup: boolean;
  currentUrl : string;
  isAuthenticated: boolean;



  constructor (
    private authGuard: AuthGuard,
    private authService: AuthService,
    private router: Router,


  ){} 

  ngOnInit() {

    this.authService.isAuthenticated().subscribe(
      (authenticated) => {
        if (authenticated) {
          this.isAuthenticated = true;
        } else {
          this.isAuthenticated = false;
        }

      }

    );

  }

Answer 1

在ngOnInit（）中，我对此进行了解释.authService.authStatusChanged.subscribe

在每次更改时发出，并在ngDoCheck（）中订阅

this.authService.isAuthenticated().subscribe

发射一次

我这样就得到了所需的行为

Angular 2指令不会在重新加载时第一次路由器重定向时更改模板元素

1 个答案: