Di Angular, bagaimana Anda menentukan rute aktif?

CATATAN: Ada banyak jawaban berbeda di sini, dan sebagian besar telah valid pada satu waktu atau yang lain. Faktanya adalah apa yang berhasil telah berubah beberapa kali karena tim Angular telah mengubah Router-nya. Router versi 3.0 yang pada akhirnya akan menjadi yang router di istirahat Sudut banyak solusi ini, tapi menawarkan solusi yang sangat sederhana sendiri. Pada RC.3, solusi yang lebih disukai adalah menggunakan [routerLinkActive]seperti yang ditunjukkan dalam jawaban ini .

Dalam aplikasi Angular (saat ini dalam rilis 2.0.0-beta.0 saat saya menulis ini), bagaimana Anda menentukan apa rute aktif saat ini?

Saya sedang mengerjakan aplikasi yang menggunakan Bootstrap 4 dan saya perlu cara untuk menandai tautan / tombol navigasi sebagai aktif ketika komponen terkait mereka ditampilkan dalam sebuah <router-output>tag.

Saya menyadari bahwa saya dapat mempertahankan keadaan sendiri ketika salah satu tombol diklik, tetapi itu tidak akan mencakup kasus memiliki beberapa jalur ke rute yang sama (katakanlah menu navigasi utama serta menu lokal di komponen utama ).

Saran atau tautan apa pun akan dihargai. Terima kasih.

Dengan router Angular baru , Anda dapat menambahkan [routerLinkActive]="['your-class-name']"atribut ke semua tautan Anda:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Atau format non-array yang disederhanakan jika hanya satu kelas yang dibutuhkan:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Atau format yang lebih sederhana jika hanya satu kelas yang dibutuhkan:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

Lihat arahan yang tidak didokumentasikan dengan baikrouterLinkActive untuk info lebih lanjut. (Saya kebanyakan menemukan ini melalui trial-and-error.)

UPDATE: Dokumentasi yang lebih baik untuk routerLinkActivearahan sekarang dapat ditemukan di sini . (Terima kasih kepada @Victor Hugo Arango A. dalam komentar di bawah ini.)

Saya telah menjawab ini dalam pertanyaan lain, tetapi saya percaya ini mungkin relevan dengan yang ini juga. Berikut tautan ke jawaban asli: Angular 2: Cara menentukan rute aktif dengan parameter?

Saya sudah mencoba mengatur aktif kelas tanpa harus tahu persis apa lokasi saat ini (menggunakan nama rute) . Solusi terbaik yang saya dapatkan sejauh ini adalah menggunakan fungsi isRouteActive yang tersedia di Routerkelas.

router.isRouteActive(instruction): Booleanmengambil satu parameter yang merupakan Instructionobjek rute dan mengembalikan trueataufalse apakah instruksi itu berlaku atau tidak untuk rute saat ini. Anda dapat menghasilkan sebuah rute Instructiondengan menggunakan Router's menghasilkan (linkParams: Array) . LinkParams mengikuti format yang sama persis dengan nilai yang diteruskan ke direktif routerLink (misalnya router.isRouteActive(router.generate(['/User', { user: user.id }]))).

Ini adalah bagaimana RouteConfig dapat terlihat (saya telah sedikit mengubahnya untuk menunjukkan penggunaan params) :

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

Dan View akan terlihat seperti ini:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

Sejauh ini, ini adalah solusi yang saya sukai untuk masalah ini, mungkin juga bermanfaat bagi Anda.

Saya memecahkan masalah yang saya temui dalam tautan ini dan saya menemukan bahwa ada solusi sederhana untuk pertanyaan Anda. Anda dapat menggunakannya router-link-activesebagai gantinya dalam gaya Anda.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

Perbaikan kecil untuk jawaban @ alex-correia-santos berdasarkan https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
} 

Dan gunakan seperti ini:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

Anda dapat memeriksa rute saat ini dengan menyuntikkan Locationobjek ke controller Anda dan memeriksa path(), seperti:

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

Anda harus memastikan untuk mengimpornya terlebih dahulu:

import {Location} from "angular2/router";

Anda kemudian dapat menggunakan ekspresi reguler untuk mencocokkan dengan jalur yang dikembalikan untuk melihat rute mana yang aktif. Perhatikan bahwa Locationkelas mengembalikan jalur yang dinormalisasi apa pun yang LocationStrategyAnda gunakan. Jadi, bahkan jika Anda menggunakan HashLocationStragegyjalur yang dikembalikan masih dalam bentuk /foo/bar tidak #/foo/bar

bagaimana Anda menentukan apa rute aktif saat ini?

UPDATE: diperbarui sesuai Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

lihat lebih lanjut ...

Untuk menandai rute aktif routerLinkActivedapat digunakan

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

Ini juga berfungsi pada elemen lain seperti

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

Jika sebagian kecocokan juga harus ditandai, gunakan

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

Sejauh yang saya tahu exact: falseakan menjadi default di RC.4

Saat ini saya menggunakan rc.4 dengan bootstrap 4 dan ini berfungsi sempurna untuk saya:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

Ini akan berfungsi untuk url: / home

Di bawah ini adalah metode menggunakan RouteData ke menu styleBar item tergantung dari rute saat ini:

RouteConfig termasuk data dengan tab (rute saat ini):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

Sepotong tata letak:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Kelas:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

Saya pikir saya akan menambahkan contoh yang tidak menggunakan naskah apa pun:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

The routerLinkActivevariabel terikat ke variabel template dan kemudian kembali digunakan sebagai diperlukan. Sayangnya satu-satunya peringatan adalah bahwa Anda tidak dapat memiliki semua ini pada <section>elemen karena #homeperlu diselesaikan sebelum parser memukul <section>.

Routerdi Angular 2 RC tidak lagi mendefinisikan isRouteActivedan generatemetode.

urlTree - Mengembalikan pohon url saat ini.

createUrlTree(commands: any[], segment?: RouteSegment) - Menerapkan berbagai perintah ke pohon url saat ini dan membuat pohon url baru.

Coba ikuti

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

perhatikan, routeSegment : RouteSegmentharus disuntikkan ke konstruktor komponen.

Berikut adalah contoh lengkap untuk menambahkan styling rute aktif dalam versi Angular 2.0.0-rc.1yang memperhitungkan jalur akar nol akun (mis. path: '/')

app.component.ts -> Rute

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

Solusi untuk Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

Pada Angular 8, ini berfungsi:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } memastikan cocok dengan url.

pada tahun 2020 jika Anda ingin mengatur kelas aktif pada elemen yang tidak memiliki [routerLink] - Anda dapat melakukannya dengan mudah:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

Solusi Lain. Jauh lebih mudah di Angular Router V3 Alpha. dengan menyuntikkan Router

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

pemakaian

<div *ngIf="routeIsActive('/')"> My content </div>

Di Angular2 RC2 Anda dapat menggunakan implementasi sederhana ini

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

ini akan menambah kelas activeke elemen dengan url yang cocok, baca lebih lanjut di sini

Di bawah ini adalah jawaban untuk pertanyaan ini untuk semua versi versi Angular 2 RC yang dirilis hingga saat ini:

RC4 dan RC3 :

Untuk menerapkan kelas ke tautan atau leluhur tautan:

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/ home harus menjadi URL dan bukan nama rute karena properti nama tidak lagi ada di Route Object pada Router v3.

Lebih lanjut tentang routerLinkActive direktif di tautan ini .

Untuk menerapkan kelas ke div mana pun berdasarkan rute saat ini:

• Suntikkan Router ke konstruktor komponen.
• Router.url pengguna untuk perbandingan.

misalnya

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 dan RC1 :

Gunakan kombinasi router.isRouteActive dan kelas. *. misalnya untuk menerapkan kelas aktif berdasarkan Rute Rumah.

Nama dan url keduanya dapat diteruskan ke router.generate.

 <li [class.active]="router.isRouteActive(router.generate(['Home']))">
    <a [routerLink]="['Home']" >Home</a>
</li>

Penggunaan routerLinkActivebagus dalam kasus-kasus sederhana, ketika ada tautan dan Anda ingin menerapkan beberapa kelas. Tetapi dalam kasus yang lebih kompleks di mana Anda mungkin tidak memiliki routerLink atau di mana Anda membutuhkan sesuatu yang lebih, Anda dapat membuat dan menggunakan pipa :

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

kemudian:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

dan jangan lupa untuk memasukkan pipa ke dalam dependensi pipa;)

Untuk Angular versi 4+, Anda tidak perlu menggunakan solusi yang rumit. Anda cukup menggunakan [routerLinkActive]="'is-active'".

Sebagai contoh dengan tautan bootstrap 4 nav:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

Sebuah instance dari kelas Router sebenarnya adalah Observable dan mengembalikan jalur saat ini setiap kali ia berubah. Beginilah cara saya melakukannya:

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

Dan kemudian di HTML saya:

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

Seperti disebutkan dalam salah satu komentar dari jawaban yang diterima, routerLinkActivearahan juga dapat diterapkan pada wadah <a>tag yang sebenarnya .

Jadi misalnya dengan tab Bootstrap Twitter tempat kelas aktif harus diterapkan ke <li>tag yang berisi tautan:

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Cukup rapi! Saya kira arahan memeriksa konten tag dan mencari <a>tag dengan routerLinkarahan.

Solusi sederhana untuk pengguna sudut 5 adalah, cukup tambahkan routerLinkActiveke item daftar.

Sebuah routerLinkActivedirektif dikaitkan dengan rute melaluirouterLink direktif.

Dibutuhkan sebagai input array kelas yang akan ditambahkan ke elemen yang dilampirkan jika rute saat ini aktif, seperti:

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

Di atas akan menambahkan kelas aktif ke tag jangkar jika kita saat ini melihat rute rumah.

Dan dalam versi sudut terbaru, Anda cukup melakukan pengecekan router.isActive(routeNameAsString). Sebagai contoh, lihat contoh di bawah ini:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

Dan pastikan Anda tidak melupakan router injeksi di komponen Anda.

Saya sedang mencari cara untuk menggunakan gaya Bootstrap Twitter nav dengan Angular2, tetapi kesulitan mendapatkan active kelas yang diterapkan pada elemen induk dari tautan yang dipilih. Menemukan bahwa solusi @ alex-correia-santos bekerja dengan sempurna!

Komponen yang berisi tab Anda harus mengimpor perute dan menentukannya dalam konstruktornya sebelum Anda dapat melakukan panggilan yang diperlukan.

Berikut ini adalah versi implementasi saya yang disederhanakan ...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

katakanlah Anda ingin menambahkan CSS ke status / tab aktif saya. Gunakan routerLinkActive untuk mengaktifkan tautan perutean Anda.

catatan: 'aktif' adalah nama kelas saya di sini

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

Saya menggunakan router sudut ^3.4.7dan saya masih mengalami masalah dengan routerLinkActivearahan.

Ini tidak berfungsi jika Anda memiliki banyak tautan dengan url yang sama plus sepertinya tidak menyegarkan sepanjang waktu.

Terinspirasi oleh @tomaszbak, saya membuat komponen kecil untuk melakukan pekerjaan

Seperti template html murni

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

mulai dengan mengimpor RouterLinkActive di .ts Anda

impor {RouterLinkActive} dari '@ angular / router';

Sekarang gunakan RouterLinkActive di HTML Anda

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

berikan beberapa css ke kelas "class_Name", karena ketika tautan ini akan aktif / diklik Anda akan menemukan kelas ini pada rentang waktu inspeksi.

Cara terprogram akan melakukannya dalam komponen itu sendiri. Saya berjuang tiga minggu dalam masalah ini, tetapi menyerah pada dokumen sudut dan membaca kode aktual yang membuat routerlinkactive berfungsi dan Thats tentang dokumen terbaik yang dapat saya temukan.

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

Catatan :
Untuk cara yang terprogram, pastikan untuk menambahkan tautan router dan membutuhkan elemen turunan. Jika Anda ingin mengubahnya, Anda harus menyingkirkan anak-anak superclass.nativeElement.