Perbedaan antara [routerLink] dan routerLink

116

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

— Eslam Tahoon
sumber

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

angular.io/guide/router#routerlink-binding

— Ray

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>

— Milad
sumber

11

Penjelasan yang bagus! Terima kasih! +1

— fablexis

15

Asumsikan bahwa Anda pernah

const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>

Artinya, mengklik hyperlink Resep akan melompat ke http: // localhost: 4200 / recipes

Asumsikan bahwa parameternya adalah 1

<a [routerLink] = "['/recipes', parameter]"></a>

Artinya, dengan meneruskan parameter dinamis, 1 ke link, lalu Anda membuka http: // localhost: 4200 / recipes / 1

— matthew cewek
sumber

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

— Piotr Adamkowski
sumber