在angular4中使用用戶頁面注冊時如何更改主頁的內容

Question

主頁和用戶頁面的內容顯示在主頁本身上。 在標題部分，我有home.html的SignIn和SignUp表單。 我還有一個Signup form從用戶頁面，在那里我有3個按鈕， signUp with facebook ， signUp with google和SignUp使用的姓名，電子郵件和密碼。 當我使用注冊signUp with facebook ， signUp with google ，從更改主頁的conents SignIn and SignUp到User and SignOut和用戶頁面的注冊形式獲取隱藏。

但是這種情況在我僅使用名稱，電子郵件和密碼進行signUp時signUp 。

我也使用了發射發射器，但是僅與SignUp不兼容。 誰能幫忙。

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> 

User.html：

<div class="favourate" *ngIf="!loggedIn">
    <h1>User</h1>
    <hr />
    <div class="backImage">
      <form name="signUpForm" class="signUpForm" #signUpForm="ngForm" novalidate>
        <div class="form-group">
          <h3>Sign Up</h3>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>perm_identity</mat-icon>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="name" #Name="ngModel" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>email</mat-icon>
            <input matInput type="email" placeholder="Email" name="email" [(ngModel)]="user.email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>lock</mat-icon>
            <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="user.password" #Password="ngModel" required>
          </mat-form-field>
        </div>          
      </form>
    </div>
  </div>

用戶名：

this.ApiService
      .checklogin()
      .subscribe(
        user  => {
          this.loggedIn = localStorage.getItem("loggedin");
          this.user_id = user.data[0].user_id;
          this.userName = user.data[0].name;
        }, error => {
          console.log(error);
        });
      newUser(user,_id) {
        this.isLoadingSignUp = true;
        user.role_id = this._id 
        var data = {
          "user":{
          email:user.email,
          password:user.password,
          active:user.active,
          role_id:this._id,
          name:user.name
           }     
        }
        this.ApiService
            .signUp(data)
            .subscribe(
              signUser => {
                  this.userName = user.name;
                  localStorage.setItem('loggedin', 'true');
                  this.loggedIn = true;
                  this.isLoadingSignUp = false;
                  this.router.navigate(['/home']);
                  this.toasterService.pop('success', 'SignUp Successfully');
                  this.ApiService.getUserData(user.data);
               }, error => {
                  this.isLoadingSignUp = false;
                  this.ApiService.getUserData(error);
                  if(error.data && error.data.length > 0) {
                    this.toasterService.pop('error', error.data);
                  } else {
                    this.toasterService.pop('error', 'Something went wrong!');
                  }
               })
      }

Answer 1

根據您的要求和項目流程結構，您可以從瀏覽器獲取幫助。 這意味着每次用戶使用Facebook或google登錄或注冊時。 您可以在瀏覽器本地存儲中存儲唯一值。 並可以檢索或使用它來檢查用戶登錄的位置。 該值可以在ngIf條件中簡單使用。 喜歡何時顯示和何時不顯示。

我希望你能理解我的意思。

Answer 2

您可以使用Observable和subject在不同組件之間進行通信。

您應該使用服務來執行此操作。

創建一個名為SignUpService的服務，該服務創建一個新subject以指示登錄

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();
  }
}

在signIn component調用該subject

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

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

在Header component該事件

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();
  }
}