NavigationMixin perlu diimport daripada kilat/navigasi dalam fail 'javascript'. Navigasi ialah kaedah yang tersedia dalam modul ini. Ia memerlukan jenis dan atribut. Jenis menentukan jenis halaman yang kami navigasi dan atribut mengambil pageName.
- Daripada Persediaan, cari 'Pembina Aplikasi Lightning' dan klik pada 'Baharu'.
- Pilih 'Halaman Apl' dan klik pada 'Seterusnya'.
- Berikan label sebagai 'Perkhidmatan Navigasi'.
- Pergi dengan satu rantau dan klik pada 'Selesai'.
Apl anda sedia untuk digunakan. Cari di bawah 'Pelancar Apl'.
Untuk semua contoh Perkhidmatan Navigasi yang akan dibincangkan dalam panduan ini, kami menggunakan fail 'meta-xml' yang sama. Anda boleh meletakkan komponen dalam halaman Apl anda yang anda buat sekarang. Kami tidak akan menentukan fail ini (meta-xml) sekali lagi di bawah coretan kod contoh.
'1.0' ?>
Menavigasi ke Halaman Utama
Jika anda ingin menavigasi ke halaman Utama standard Salesforce, lihat contoh berikut:
Navigation.html
Kami membuat butang. Klik 'homeNavigation' ini akan dikendalikan dalam fail 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda akan dialihkan ke Halaman Utama < / b >< br >< / div >
< / kad kilat>
< / templat>
Navigation.js
Jenisnya hendaklah “standard__namedPage” dan pageName hendaklah “home”. Ini dinyatakan dalam kaedah pengendali homeNavigation().
import { Elemen Kilat } daripada 'nasib' ;
import { NavigationMixin } daripada 'kilat/navigasi'
eksport lalai kelas Navigasi memanjang NavigationMixin ( Elemen Kilat ) {
// kaedah pengendali
// pageName sepatutnya berada di rumah
// jenis halaman ialah standard__namedPage untuk rumah
homeNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
taip : 'standard__namedPage' ,
sifat-sifat : {
pageName : 'rumah'
}
} )
}
}
Pengeluaran:
Tambahkan komponen ini pada halaman Apl dan klik pada butang 'Pergi ke halaman Utama'.
Kini, anda berada di halaman Utama.
Menavigasi ke Chatter
Anda boleh berkongsi fail, mesej teks dan butiran log menggunakan Salesforce Chatter. Anda boleh menavigasi terus ke Chatter menggunakan Perkhidmatan Navigasi.
Navigation.html
Kami membuat butang. Klik 'chatterNavigation' ini akan dikendalikan dalam fail 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda akan dialihkan ke Chatter < / b >< br >< / div >
< / kad kilat>
< / templat>
Navigation.js
Jenisnya hendaklah “standard__namedPage” dan pageName hendaklah “chatter”. Ini dinyatakan dalam kaedah pengendali chatterNavigation(). Tampalkan coretan berikut di dalam kelas 'js'.
// kaedah pengendali// pageName sepatutnya berbual
// jenis halaman ialah standard__namedPage untuk perbualan
chatterNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
taip : 'standard__namedPage' ,
sifat-sifat : {
pageName : 'berbual'
}
} )
}
Pengeluaran:
Muat semula halaman. Kini, anda boleh menyiarkan kemas kini dan berkongsi fail dalam Chatter dengan menavigasi ke sana.
Menavigasi ke Rekod Baharu
Tanpa pergi ke tab objek tertentu untuk mencipta rekod baharu, anda boleh terus mencipta rekod baharu untuk objek tertentu menggunakan Perkhidmatan Navigasi. Dalam senario ini, kita perlu menentukan objectApiName dan actionName sebagai atribut.
- objectApiName ialah nama API objek Salesforce seperti 'Akaun', 'Kenalan', 'Kes', dsb.
- Kami mencipta rekod baru. Jadi, actionName mestilah 'baharu'.
Navigation.html
Mari buat rekod Kes. Kami membuat butang. Klik 'newRecordNavigation' ini akan dikendalikan dalam fail 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda boleh membuat Kes dari sini... < / b >< br >< / div >
< / kad kilat>
< / templat>
Navigation.js
Jenisnya hendaklah 'standard__objectPage'. Ini dinyatakan dalam kaedah pengendali newRecordNavigation(). Tampalkan coretan berikut di dalam kelas 'js'.
// kaedah pengendali// Kes ialah objectApiName dan actionName ialah Baharu.
// jenis halaman ialah standard__objectPage
newRecordNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
menaip : 'standard__objectPage' ,
sifat-sifat : {
objectApiName : 'Kes' ,
actionName : 'baru'
}
} )
}
Pengeluaran:
Muat semula halaman. Kini, anda boleh mencipta rekod yang berkaitan dengan Kes.
Jika anda menyimpannya, anda akan menavigasi ke halaman rekodnya.
Menavigasi ke Halaman Rekod
Sama seperti navigasi sebelumnya (Contoh 3), kita boleh pergi ke rekod tertentu dan melihat atau mengedit butiran. Satu lagi sifat yang anda perlu luluskan dalam atribut ialah 'recordId' (Id rekod sedia ada). ActionName hendaklah 'lihat' dalam senario ini.
Navigation.html
Mari navigasi ke rekod Kes. Kami membuat butang. Klik pada 'viewRecordNavigation' ini akan dikendalikan dalam fail 'js'.
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda boleh melihat rekod Kes dari sini... < / b >< br >< / div >
< / kad kilat>
< / templat>
Navigation.js
Jenisnya hendaklah 'standard__recordPage'. Ini dinyatakan dalam kaedah pengendali viewRecordNavigation(). Tampalkan coretan berikut di dalam kelas 'js'.
// kaedah pengendali// Case ialah objectApiName dan actionName ialah view.
// jenis halaman ialah standard__recordPage
viewRecordNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
menaip : 'standard__recordPage' ,
sifat-sifat : {
recordId : '5002t00000PRrXkAAL' ,
objectApiName : 'Kes' ,
actionName : 'pandangan'
}
} )
}
Pengeluaran:
Anda boleh melihat butiran kes selepas navigasi. Di sini, anda boleh melihat dan mengedit butiran kes.
Navigasi Lain
Mari navigasi ke Paparan senarai dan fail. Untuk paparan Senarai, anda memerlukan nama objek dan nama penapis. Anda akan dapati ini dalam URL. Kami akan menghuraikan ini dalam contoh.
Fail disimpan dalam objek ContentDocument. Jadi, untuk fail, objectApiName akan menjadi 'ContentDocument' dan actionName ialah 'home'.
Senarai semak:
Fail:
Navigation.html
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda boleh menavigasi ke Paparan Senarai < / b >< br >< / div >
< div kelas = 'slds-var-m-around_medium' gaya = 'tinggi:20px; lebar:400px' >
< b > Anda boleh menavigasi ke Fail < / b >< br >< / div >
< / kad kilat>
< / templat>
Navigation.js
// Pengendali ListviewviewListNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
menaip : 'standard__objectPage' ,
sifat-sifat : {
objectApiName : 'Kes' ,
actionName : 'senarai' ,
negeri : {
nama penapis : '00B2t000002oWELEA2'
}
}
} )
}
// Pengendali Filesview
viewFileNavigation ( ) {
ini [ NavigationMixin. Navigasi ] ( {
menaip : 'standard__objectPage' ,
sifat-sifat : {
objectApiName : 'ContentDocument' ,
actionName : 'rumah'
}
} )
}
Pengeluaran:
Anda akan menavigasi ke paparan senarai Kes anda. Nama penapis yang kami tentukan ialah 'Semua Kes Tertutup'.
Anda boleh melihat fail anda dari halaman Apl ini dengan mengklik butang 'Pergi ke Fail'.
Kesimpulan
Salesforce LWC menyediakan navigasi terus di mana anda boleh menavigasi untuk kekal dalam halaman tertentu. Dalam panduan ini, kami mempelajari navigasi yang berbeza menggunakan Perkhidmatan Navigasi Komponen Web Lightning. Terdapat banyak navigasi lain yang wujud tetapi kami membincangkan navigasi penting yang mesti diketahui oleh semua Pembangun LWC. Dalam semua navigasi, NavigationMixin perlu diimport daripada kilat/navigasi.