Изменить MasterPage после входа в Angular 6

Question

У меня есть masterpage, у которого есть верхний и нижний колонтитулы и <router-outlet></router-outlet> между ними. Теперь в моем заголовке есть меню типа Login, Sign Up. Но я хочу, чтобы пользователь вошел в систему, чтобы страница или заголовок были изменены. Пожалуйста, предоставьте мне хорошее и простое решение для этого. Спасибо

MasterPage.html header

<div class="top-row row-2">
  <div class="container">
    <ul class="el-social" style="margin-top:0;">
      <li><a href="#"><img src="assets/img/fb.png" /></a></li>
      <li><a href="#"><img src="assets/img/tw.png" /></a></li>
      <li><a href="#"><img src="assets/img/lkin.png" /></a></li>
    </ul>
    <ul class="el-tp-menu el-tp-menu-ne main-nav">
      <li><a routerLink="site-feedback">Site Feedback</a></li>
      <li><a routerLink="privacy-policy">Privacy Policy</a></li>
      <li><a routerLink="terms-of-use">Terms of Use</a></li>
      <li><a routerLink="contact-us">Contact Us</a></li>
      <li><a href="javascript:void(0)" class="login-top cd-signin">Login</a></li>
      <li><a href="javascript:void(0)" class="login-top cd-signup">Sign Up</a></li>
    </ul>
  </div>
</div>

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MasterpageComponent } from './masterpage/masterpage.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './views/home/home.component';
import { RouterModule, Routes } from '@angular/router';
// import { RoutingsModule } from './routings/routings.module';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
import { LoginComponent } from './views/components/login/login.component';
import { RegisterComponent } from './views/components/register/register.component';
import { AddUserService } from './shared/add-user.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'site-feedback',
    loadChildren: "src/app/views/site-feedback/site-feedback.module#SiteFeedbackModule"
  },
  {
    path: 'privacy-policy',
    loadChildren: "src/app/views/privacy-policy/privacy-policy.module#PrivacyPolicyModule"
  },
  {
    path: 'contact-us',
    loadChildren: "src/app/views/contact-us/contact-us.module#ContactUsModule"
  },
  {
    path: 'data-coverage',
    loadChildren: "src/app/views/data-coverage/data-coverage.module#DataCoverageModule"
  },
  {
    path: 'subscribe',
    loadChildren: "src/app/views/subscribe/subscribe.module#SubscribeModule"
  },
  {
    path: 'terms-of-use',
    loadChildren: "src/app/views/terms-conditions/terms-conditions.module#TermsConditionsModule"
  },
  {
    path: 'dashboard',
    loadChildren: "src/app/views/dashboard/dashboard.module#DashboardModule"
  }
]


@NgModule({
  declarations: [
    MasterpageComponent,
    HomeComponent,
    LoginComponent,
    RegisterComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    SlimLoadingBarModule,
    RouterModule.forRoot(routes,
      { useHash: true })
    // preloadingStrategy: PreloadAllModules,
  ],
  providers: [
    AddUserService
  ],
  bootstrap: [MasterpageComponent]
})
export class AppModule { }

Answer 1

Это сложный вопрос, потому что он содержит много маленьких вопросов внутри.Но вот мое решение.

1. используйте управление состоянием, чтобы поделиться вашим состоянием.
2. используйте ng-template с двумя директивами, одна - beforeLogin, а другая - afterLogin для обработки представления.Вот мой черновой код:

   <app-navigation>
      <ng-template appBeforeLogin>
          navigation before login
      </ng-template>
      <ng-template appAfterLogin>
          navigation after login
      </ng-template>
   </app-navigation>

затем в app-navigation вы должны подписать информацию о пользователе из состояния и установить соответствующий вид для вашей навигации.

Здесь - мой пример кода для аналогичного решения в таблице

Answer 2

, если вы хотите редактировать вашу панель навигации после входа в систему, используйте "* ngIf":

это пример:

(для панели навигации)

<div class="log">
    <div ngbDropdown class="dropdown" *ngIf="isLoggedIn; else loggedOut">
      <button class="btn btn-outline-light" id="dropdownMenuLink" ngbDropdownToggle>{{userInfo.username}}</button>
      <div ngbDropdownMenu aria-labelledby="dropdownMenuLink">
        <button ngbDropdownItem ><a routerLink="link-one">Link One</a></button>
        <button ngbDropdownItem><a routerLink="link-two">Ling Two</a></button>
        <button type="button" class="btn btn-outline-dark ml-4" (click)="logout()">Logout</button>
      </div>
    </div>
    <ng-template #loggedOut>
      <button class="btn btn-outline-light" (click)="login()">Login</button>
    </ng-template>
  </div>

(для MasterPage.ts)

ngOnInit() {
  this.userInfo = this.userService.getUser().subscribe(user => {
  this.userInfo = user;
}); }

logout() {
  this.authenticationService.logout();
  this.router.navigate(['']);}

login() {
  this.router.navigate(['login']);}

Вам просто нужно выполнить свою функцию 'isLoggedIn':)

Если вы хотите полностью изменить страницу, вы создаете два других копонанта ex: connected-и отключи и поставь сам код:

<div class="container mt-4 text-center">
 <div *ngIf="isLoggedIn; else loggedOut">
   <app-connected-on></app-connected-on>           <!-- page html => connected-on.component.html -->
 </div>

 <ng-template #loggedOut>
   <app-connected-off></app-connected-off>         <!-- page html => connected-off.component.html -->
 </ng-template>