การเรียก Route ผ่าน Router Outlet ที่มีการกำหนดชื่อ ใน Angular ตอนที่ 7

 <a class="navbar-brand" routerLink="/contact" routerLinkActive="active">Contact Us</a> 

C:\projects\simplerouter>ng g c contact

<form class="myform">
<p>contact works!</p>
<div class="text-center">{{ details }}</div>
<div>
    <div>
        <label>Title: </label>
      </div>
      <div>
        <input type="text" class="form-control" />
      </div>  
  <div>
    <label>Message: </label>
  </div>
  <div>
    <textarea class="form-control" rows="4"></textarea>
  </div>
</div>
<br>
<p>
  <button type="button" class="btn btn-sm btn-default" (click)="send()">Send</button>
  <button type="button" class="btn btn-sm btn-danger" (click)="cancel()">Cancel</button>
</p>
</form>

import { Component, OnInit } from '@angular/core';

@Component({
//  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  public details: string;
  public sending:boolean = false;
 
  constructor() {}

  send(){

  }

  cancel(){
    
  }

  ngOnInit() {
  }

}

<router-outlet></router-outlet>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" routerLink="/home" routerLinkActive="active">Home</a>
      <a class="navbar-brand" routerLink="/users" routerLinkActive="active">User</a>
      <a class="navbar-brand" routerLink="/products" routerLinkActive="active">Product</a>      
      <a class="navbar-brand" [routerLink]="[{ outlets: { popup: ['contact'] } }]" 
            routerLinkActive="active">Contact Us</a>            
    </div> 
  </div>
</nav>

<div class="container">
  <br>
  <br>
  <h1>{{title}}</h1>
  <router-outlet></router-outlet>
  <router-outlet name="popup"></router-outlet>

</div><!-- /.container -->

 [routerLink]="[{ outlets: { popup: ['contact'] } }]" 

 [routerLink]="[{ outlets: { ชื่อของ outlet: ['route path ที่จะใช้งาน'] } }]" 

<router-outlet name="popup"></router-outlet>

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';
 
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
  ], 
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

http://localhost:4200/home(popup:contact)

(popup:contact) 

:host { 
    position: fixed;
    z-index: 90000; /* ค่ายิ่งมาก ยิ่งแสดงอยู่เหนือตัวอื่น */
    margin: auto; /* กำหนดเพื่อให้ค่าอยู่ตรงกลาง */
    width: 60%;
    top: 35%;
    left: 50%; /* ต้องกำหนดเป็น 50% */
    margin-top: -100px;
    margin-left: -30%;  /* เป็นค่าติดบ ครึ่งหนึ่งของความกว้าง width*/     
    padding: 10px;
    padding-top: 30px;
    z-index: 99999;
    background-color: #FFFFFF;
    box-shadow: 6px 5px 5px 0px rgba(196,196,196,1);
    border: 1px solid #868686; 
}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
//  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  public details: string;
  public sending:boolean = false;
 
  constructor(private router: Router) {}
  
   // ฟังก์ชั่นจำลองการส่งข้อมูล
   send() {
     this.sending = true;
     this.details = 'Sending Message...';
  
     // จำลองว่าหลังส่งข้อมูลไปแล้ว 2 วิ ก็ปิด popup ไป
     setTimeout(() => {
       this.sending = false;
       this.closePopup();
     }, 2000);
   }
  
   // คำส่ังเมื่อคลิกปุ่มยกเลิก แล้วเรียกคำสั่งปิด popup ให้ทำงาน
   cancel() {
     this.closePopup();
   }
  
   // คำสั่งปิด popup
   closePopup() {
     // การกำหนดค่า  `null` ให้กับชื่อ outlet ที่ต้องการ
     // เป็นการล้างข้อมูลที่แสดงใน outlet นั้นๆ 
     this.router.navigate([{ outlets: { popup: null }}]);
   }
 
  ngOnInit() {
  }

}

this.router.navigate([{ outlets: { popup: null }}]);

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ProductModule } from './product/product.module';
import { UserModule } from './user/user.module';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';
  
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PagenofoundComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProductModule,
    UserModule,
    AppRoutingModule
  ], 
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

C:\projects\simplerouter>ng g class animations

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';

export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [ // การเคลื่อนไหวเมื่อเปลี่ยนแปลง ค่า routeAnimation
    state('*', // สภาวะที่กำลังแสดงอยู่
      style({
        opacity: 1, // แสดงผลและเห็นได้
        transform: 'translateX(0)' // ไม่มีการเปลี่ยนแปลงการเคลื่อนไหวใดๆ
      })
    ),
    transition(':enter', [  // การเปลี่ยนแปลงตอนเริ่มแสดง
      style({
        opacity: 0, // เริ่มจากมองไม่เห็นหรือไม่แสดง
        transform: 'translateX(-100%)' // เข้ามาจากทางด้านซ้ายมือจากขอบที่ติดลบ
      }),
      animate('0.2s ease-in') // ขยับเข้ามาแบบยืดหยุ่นภายใน 0.2 วินาที
    ]),
    transition(':leave', [ // การเปลี่ยนแปลงตอนปิด หรือสิ้นสุดการแสดง
      animate('0.5s ease-out', style({ // ขยับออกแบบยืดหยุ่นภายใน 0.5 วินาที
        opacity: 0, // สิ้นสุดที่มองไม่เห็น
        transform: 'translateY(100%)' // เลื่อนออกในเนวตั้งเลื่อนลงแบบค่อยๆ จางหาย
      }))
    ])
  ]);

import { Component, OnInit, HostBinding } from '@angular/core';
import { Router } from '@angular/router';

import { slideInDownAnimation }   from './../animations';

@Component({
//  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
  animations: [ slideInDownAnimation ]
})
export class ContactComponent implements OnInit {
  @HostBinding('@routeAnimation') routeAnimation = true;

  public details: string;
  public sending:boolean = false;
 
  constructor(private router: Router) {}
  
   // ฟังก์ชั่นจำลองการส่งข้อมูล
   send() {
     this.sending = true;
     this.details = 'Sending Message...';
  
     // จำลองว่าหลังส่งข้อมูลไปแล้ว 2 วิ ก็ปิด popup ไป
     setTimeout(() => {
       this.sending = false;
       this.closePopup();
     }, 2000);
   }
  
   // คำส่ังเมื่อคลิกปุ่มยกเลิก แล้วเรียกคำสั่งปิด popup ให้ทำงาน
   cancel() {
     this.closePopup();
   }
  
   // คำสั่งปิด popup
   closePopup() {
     // การกำหนดค่า  `null` ให้กับชื่อ outlet ที่ต้องการ
     // เป็นการล้างข้อมูลที่แสดงใน outlet นั้นๆ 
     this.router.navigate([{ outlets: { popup: null }}]);
   }
 
  ngOnInit() {
  }

}