Javascript 在angular4中注册用户页面时，如何更改主页内容

主页和用户页的内容显示在主页本身上。 在标题部分，我有home.html中的登录和注册表单。 我有另一个来自用户页面的

注册表单

，其中我有3个按钮，

使用facebook注册

，

使用谷歌注册

，以及

使用姓名、电子邮件和密码注册

。 当我使用

signUp with facebook

，

signUp with google

注册时，主页的内容从

SignIn and signUp

变为

User and SignOut

，用户页面的注册表单被隐藏

但当我只使用姓名、电子邮件和密码注册时，这个案例就不起作用了

我也使用了发射发射器，但这不适用于注册。有人能帮忙吗

Home.html：

<ul>
<li class="signUp" *ngIf = "loggedIn">{{userName}}</li>
<li class="signIn" (click)="signOut()" *ngIf = "loggedIn">Sign Out</li>
<li class="signUp" (click)="openSignUp(user)"  *ngIf = "!loggedIn">Sign Up</li>
<li class="signIn" (click)="openSignIn(logedin)"  *ngIf = "!loggedIn">Sign In</li>
</ul> 

---

根据您的需求和项目流程结构，您可以从浏览器获取帮助。 这意味着每当用户使用facebook或google登录或注册时。您可以在浏览器本地存储中存储唯一值。并且可以检索或使用它来检查用户是否有loggedIn。该值可以简单地用于ngIf条件。比如什么时候展示，什么时候不展示

---

我希望你明白我的意思

根据您的需求和项目流程结构，您可以从浏览器获取帮助。 这意味着每当用户使用facebook或google登录或注册时。您可以在浏览器本地存储中存储唯一值。并且可以检索或使用它来检查用户是否有loggedIn。该值可以简单地用于ngIf条件。比如什么时候展示，什么时候不展示

---

我希望你明白我的意思

您可以使用

可观察

和

主题

在不同组件之间进行通信

您应该使用服务来完成此操作

创建一个名为

SignUpService

的服务，该服务创建一个新的

主题

以指示登录

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class SignUpService {
  private signInSource = new Subject<string>();

  signinDone$ = this.signInSource.asObservable();

  signIn() {
    this.signInSource.next();
  }
}

在

标题组件中接收该事件

import { SignInService }     from './signin.service';

@Component({
})
export class SignInComponent {
    this.SignInService.signIn();
}

import { SignInService }  from './signin.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
})
export class HeaderComponent implements OnDestroy {
  subscription: Subscription;

  constructor(private signInService: SignInService) {
    this.subscription = signInService.signinDone$.subscribe(
      signin => {
        alert('came here')
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

您可以使用
Observable
和
subject
在不同组件之间进行通信

您应该使用服务来完成此操作

创建一个名为
SignUpService
的服务，该服务创建一个新的
主题
以指示登录

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class SignUpService {
  private signInSource = new Subject<string>();

  signinDone$ = this.signInSource.asObservable();

  signIn() {
    this.signInSource.next();
  }
}

在
标题组件中接收该事件

import { SignInService }     from './signin.service';

@Component({
})
export class SignInComponent {
    this.SignInService.signIn();
}

import { SignInService }  from './signin.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
})
export class HeaderComponent implements OnDestroy {
  subscription: Subscription;

  constructor(private signInService: SignInService) {
    this.subscription = signInService.signinDone$.subscribe(
      signin => {
        alert('came here')
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

是的，和我用过的方法一样，它是用这些方法工作的，但不是只用注册使用不同的本地存储值注册不要使用相同的。在ngIf for singUp中，您可以检查这两个值。是的，我已经使用了*ngIf=“！loggedIn”，所以如果我再使用一个本地存储值，那么*ngIf=“！loggedIn | | other name”，我应该写这个吗？是的，但我不知道您为什么写这个。loggedIn=true；在注册API服务中。它已经将其设置为真，不要故意设置该值。好的，我会删除该值，与我使用的方法相同，它正在处理这些值，但不仅仅是注册使用不同的本地存储值注册不要使用相同的值。在ngIf for singUp中，您可以检查这两个值。是的，我已经使用了*ngIf=“！loggedIn”，所以如果我再使用一个本地存储值，那么*ngIf=“！loggedIn | | other name”，我应该写这个吗？是的，但我不知道您为什么写这个。loggedIn=true；在注册API服务中。它已经将其设置为真。不要故意设置该值。你确定我会删除你的意思是我必须创建一个新服务吗？你可以创建一个新服务，也可以使用一个旧服务（如果有）。我有一个api。服务。。我只能在其中使用？我已经粘贴了我的服务，但工作不正常，我的意思是希望我做得不对。你的意思是我必须创建一个新的服务？你可以创建一个新的服务，或者可以使用一个旧的服务，如果你有一个我有一个api。服务。。我只能用在那个里？我已经贴在我的服务，但不能正常工作，我的意思是希望我做错了让我们。