Perbedaan antara [routerLink] dan routerLink


116

Apa perbedaan antara [routerLink]dan routerLink? Bagaimana sebaiknya Anda menggunakan masing-masing?


Mereka adalah arahan yang sama. Anda menggunakan yang pertama untuk melewatkan nilai dinamis, dan yang kedua untuk melewati jalur statis sebagai string. Ini dirinci dalam dokumentasi: angular.io/docs/ts/latest/api/router/index/…
JB Nizet

Jawaban:


190

Anda akan melihat ini di semua arahan:

Saat Anda menggunakan tanda kurung, itu berarti Anda meneruskan properti yang dapat diikat (variabel).

  <a [routerLink]="routerLinkVariable"></a>

Jadi variabel ini (routerLinkVariable) dapat didefinisikan di dalam kelas Anda dan harus memiliki nilai seperti di bawah ini:

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!

Tetapi dengan variabel, Anda memiliki kesempatan untuk membuatnya dinamis bukan?

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Jika tanpa tanda kurung Anda hanya melewatkan string dan Anda tidak dapat mengubahnya, kode itu sulit dikodekan dan akan seperti itu di seluruh aplikasi Anda.

<a routerLink="/home"></a>

PERBARUI:

Keistimewaan lain tentang menggunakan tanda kurung khusus untuk routerLink adalah Anda dapat meneruskan parameter dinamis ke tautan yang Anda navigasikan:

Jadi menambahkan variabel baru

export class myComponent {
        private dynamicParameter = '129';
        public routerLinkVariable = "/home"; 

Memperbarui [routerLink]

  <a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>

Jika Anda ingin mengklik tautan ini, itu akan menjadi:

  <a href="https://stackoverflow.com/home/129"></a>

11
Penjelasan yang bagus! Terima kasih! +1
fablexis


3

Tautan Router

routerLink dengan tanda kurung dan tidak ada - penjelasan sederhana.

Perbedaan antara routerLink = dan [routerLink] sebagian besar seperti jalur relatif dan absolut.

Mirip dengan href yang mungkin ingin Anda buka ./about.html atau https://your-site.com/about.html .

Bila Anda menggunakan tanpa tanda kurung maka Anda menavigasi relatif dan tanpa params;

my-app.com/dashboard/client

"melompat" dari my-app.com/dashboard ke my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

Ketika Anda menggunakan routerLink dengan tanda kurung maka Anda menjalankan aplikasi untuk menavigasi absolut dan Anda dapat menambahkan parameter bagaimana teka-teki tautan baru Anda

pertama-tama itu tidak akan menyertakan "lompatan" dari dasbor / ke dasbor / klien / client-id dan membawa Anda data klien / client-id yang lebih berguna untuk EDIT KLIEN

<a [routerLink]="['/client', client.id]" ... rest the same

Cara absolut atau braket routerLink memerlukan pengaturan tambahan dari Anda komponen dan app.routing.module.ts

Kode tanpa kesalahan akan "memberitahu Anda lebih banyak / apa tujuan []" saat Anda melakukan pengujian. Cukup periksa ini dengan atau tanpa []. Daripada Anda dapat bereksperimen dengan penyeleksi yang - seperti disebutkan di atas - membantu dengan perutean dinamis.

Angular.io Selectors

Lihat apa yang dibangun routerLink

https://angular.io/api/router/RouterLink#selectors

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.