app.module.ts

import {BrowserModule} from '@angular/platform-browser';import {NgModule} from '@angular/core';import {AppComponent} from './app.component';import {NavBarComponent} from './nav-bar/nav-bar.component';import {FooterComponent} from './footer/footer.component';import {SearchComponent} from './search/search.component';import {ProductComponent} from './product/product.component';import {CarouselComponent} from './carousel/carousel.component';import {StarsComponent} from './stars/stars.component';import {HomeComponent} from './home/home.component';import {RouterModule, Routes} from '@angular/router';import {Code404Component} from './code404/code404.component';import { LoginComponent } from './login/login.component';const routes: Routes = [  {path: '', redirectTo: '/home', pathMatch: 'full'},  {path: 'home', component: HomeComponent},  {path: 'login', component: LoginComponent},  {path: '**', component: Code404Component}];@NgModule({  declarations: [    AppComponent,    NavBarComponent,    FooterComponent,    SearchComponent,    ProductComponent,    CarouselComponent,    StarsComponent,    HomeComponent,    Code404Component,    LoginComponent  ],  imports: [    BrowserModule,    RouterModule.forRoot(routes)  ],  exports: [RouterModule],  providers: [],  bootstrap: [AppComponent]})export class AppModule {}

app-nav-bar.component.heml update

首页

     
        
      
 Sign Up
        
      
 Login
      
     

login.component.html

     
  
      
    
       
      
        
        
         
          Login
         
      
        
      
        
        
         
        
         
          
          UserName          
          
 
            
            
          
          
          Password          
          
 
            
            
          
          
          
 
           
 
            Login 
           
 
          
        
         
      
        
    
       
  
      
     

home.component.html

 

 

update app.component.html