用户登录Angular 6时浏览另一个母版页

Question

我在所有网站上都使用MasterPage。所有组件都正在<router-outlet>中加载。但是我想要当用户成功登录时，以便当另一个母版页以及登录后的所有组件都应加载到第二个母版页中时，更改母版页。请给我一个解决方案。 谢谢

MasterPage.html

<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="en/site-feedback">Site Feedback</a></li>
      <li><a routerLink="en/privacy-policy">Privacy Policy</a></li>
      <li><a routerLink="en/terms-of-use">Terms of Use</a></li>
      <li><a routerLink="en/contact-us">Contact Us</a></li>
      <li><a href="javascript:void(0)" class="login-top cd-signin">Member Login</a></li>
      <li><a href="javascript:void(0)" class="login-top cd-signup">Free Trial</a></li>
    </ul>
  </div>
</div>

<div class="logo-row row-2">
  <div class="container">
    <div class="row-2">
      <div class="el-logo">
        <a href="index.html"><img src="../../assets/img/logo.png" alt="Eastlaw Logo" /></a>
      </div>
      <div class="main-menu">
        <nav id="nav" class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav2">
              <li><a routerLink="home" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a></li>
              <li><a href=".html">Featues</a></li>
              <li><a routerLink="en/data-coverage">Data Coverage</a></li>
              <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Legislation <b class="caret"></b></a>
                <ul class="dropdown-menu bgGrey">
                  <li><a href="#">Federal Legislation</a></li>
                  <li><a href="#">Provincial Legislation</a></li>
                  <li><a href="#">Federal Amendment Acts</a></li>
                  <li><a href="#">Provincial Amendment Acts</a></li>
                  <li><a href="#">Federal Rules and Regulations</a></li>
                  <li><a href="#">Provincial Rules and Regulations</a></li>
                  <li><a href="#">Bill By National Assembly</a></li>
                  <li><a href="#">Bill By Provincial Assembly</a></li>
                </ul>
              </li>
              <li><a href=".html">Practice Areas</a></li>
              <li><a href=".html">Departments</a></li>
              <li><a href=".html">E-Newslive</a></li>
              <li><a routerLink="subscription">Subscribe</a></li>
              <li><a href=".html">Latest Judgements</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>
<!-- ========= Header End ============= -->
<!-- <div class="main-loader-routing" [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''"> -->
  <router-outlet></router-outlet>
<!-- </div> -->
<!-- =========== Footer ============ -->
<div class="footer-1">
  <div class="container">
    <ul class="quick-links main-nav">
      <li><a routerLink="en/site-feedback">Site Feedback</a></li>
      <li>|</li>
      <li><a routerLink="en/privacy-policy">Privacy Policy</a></li>
      <li>|</li>
      <li><a routerLink="en/terms-of-use">Terms of Use</a></li>
      <li>|</li>
      <li><a routerLink="en/contact-us">Contact Us</a></li>
      <li>|</li>
      <li><a href="#0" class="cd-signup">Free Trial</a></li>
      <li>|</li>
      <li><a href="#0" class="cd-signin">Member Login</a></li>
    </ul>
    <div class="subscribeBox">
      <input type="email" class="form-control" placeholder="Subscribe Our Newsletter" />
      <button class="btnSubmit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>
  </div>
</div>
<div class="footer-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-xs-12">
        <div class="footer-cloumn row-2">
          <h3>About Eastlaw</h3>
          <p style="margin-bottom:10px;">East Law is a Pakistan’s Largest Case law and statuses library. It has a data
            from 1947 till now.</p>
          <p><b>Monday to Friday</b> </p>
          <p style="margin-bottom:10px;">10:00am – 5:00pm</p>
          <p><b>Saturday</b> </p>
          <p>10:00am – 3:00pm</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-xs-12">
        <div class="footer-cloumn row-2">
          <h3>Connect with Us</h3>
          <div class="row-2">
            <!--<label>Mobile:</label>-->
            <p><b>Mobile:</b> 04237311670 / 04237311671</p>
            <p><b>Whatsapp:</b> 03-111-116-670 </p>
            <div class="row-2" style="margin-bottom:10px;">
              <ul class="el-social">
                <li><a href="https://www.facebook.com/eastlaw.pk/" target="_blank"><img src="assets/img/fb.png"></a>
                </li>
                <li><a href="https://twitter.com/EastLawpk" target="_blank"><img src="assets/img/tw.png"></a></li>
                <li><a href="https://www.linkedin.com/company/eastlawpk/" target="_blank"><img
                      src="assets/img/lkin.png"></a></li>
              </ul>
            </div>
            <p><b>Eastlaw (Pvt.) Ltd.</b></p>
            <p>39 Link Farid Kot Road, Lahore, Pakistan.</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-xs-12">
        <div class="footer-cloumn row-2">
          <h3>Email Us</h3>
          <p><b>General Queries</b></p>
          <p style="margin-bottom:10px;"><a href="mailto:info@eastlaw.pk">info@eastlaw.pk</a></p>
          <p><b>Technical/Legal Queries</b></p>
          <p><a href="mailto:support@eastlaw.pk">support@eastlaw.pk</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="copyrightPartners row-2">
  <div class="container">
    <p>&copy; Copyrights 2018 <a href="#">Eastlaw.pk</a>. All Rights Reserved.</p>
    <p>Technology Partner: <a href="http://www.widerangedigital.com/" target="_blank">Wide Range Digital Solution</a>
    </p>
  </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 { 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: 'en',
    loadChildren: "src/app/views/site-feedback/site-feedback.module#SiteFeedbackModule"
  },
  {
    path: 'en',
    loadChildren: "src/app/views/privacy-policy/privacy-policy.module#PrivacyPolicyModule"
  },
  {
    path: 'en',
    loadChildren: "src/app/views/contact-us/contact-us.module#ContactUsModule"
  },
  {
    path: 'en',
    loadChildren: "src/app/views/data-coverage/data-coverage.module#DataCoverageModule"
  },
  {
    path: 'subscription',
    loadChildren: "src/app/views/subscribe/subscribe.module#SubscribeModule"
  },
  {
    path: 'en',
    loadChildren: "src/app/views/terms-conditions/terms-conditions.module#TermsConditionsModule"
  },
  {
    path: 'member',
    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 { }

login.component.ts

onSubmit(){
    console.log("Click Event");
    this.service.GetUserLogin().subscribe(
      res => { 
        this.objUserList = res as RegisterModel[];
       console.log("Login Success", res); 
       console.log("Json LEngth : ", this.objUserList.length > 0);
        if(this.objUserList.length > 0) 
        {
          var landingUrl = "#/member/member-dashboard";
          window.location.href = landingUrl;
          this.show = false;
          this.clearAll();
          $('.cd-user-modal').removeClass("is-visible");
          $('body').removeClass("overflowHide");
        } 
        else 
        {
          this.show = true;
          this.clearAll();
        }
      },
      err =>{
        console.log("User not valid : ", err);
      }
    );
  }