ng paginable

น่าพิศวง

นี่คือโมดูลเชิงมุมที่ให้ส่วนประกอบตารางที่มีความสามารถในการเรียงลำดับและการกรอง การรวมกันนอกกรอบกับการตอบสนองของ Laravel และกรอบอื่น ๆ และเค้าโครง boostrap

รุ่น

เชิงมุม	การทำผิดปกติ
> = 14.0.0 <15.0.0	v1.x

---

สารบัญ

• คุณสมบัติ
• เริ่มต้น
• เปลี่ยนการตรวจจับ
• สไตล์ที่กำหนดเอง
• สถานะการตรวจสอบ
• การบริจาค
• การพัฒนา
• แรงบันดาลใจ

คุณสมบัติ

• วัตถุการปนเปื้อนที่ปรับแต่งได้
• ตัวเลือกเซิร์ฟเวอร์หรือการปนเปื้อนในเครื่อง
• การกรองและการเรียงลำดับ
• การปรับแต่งส่วนหัว, เซลล์, ตัวกรอง, ข้อความแสดงข้อผิดพลาดและไม่มีข้อความผ่านเทมเพลต
• คอลัมน์ที่มีปุ่มดำเนินการ
• การเลือกแต่ละแถวและหลายแถว
• การรวมการเลือกเข้ากับรูปแบบปฏิกิริยา
• ปุ่มแอ็คชั่นแบทช์และแบบเลื่อนลง
• การปรับขนาดคอลัมน์
• เครื่องมือค้นหาทั่วโลกและคอลัมน์เฉพาะ
• ปรับให้เข้ากับ bootstrap 5,
• ตารางตอบสนอง
• ตัวเลือกการปรับแต่งการปนเปื้อน
• การเข้าถึงได้
• คอลัมน์ที่ขยายได้

เริ่มต้น

การติดตั้ง

ในการติดตั้งส่วนประกอบนี้เรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีโครงการของคุณ:

npm install ng-paginable --save 

การใช้งาน

หากต้องการใช้ส่วนประกอบนี้ให้นำเข้าสู่โมดูลของคุณ:

 import { NgPaginableModule } from 'ng-paginable' ;  
@ NgModule ( {   
	imports : [ NgPaginableModule . forRoot ( ) ] 
} ) 
export class AppModule { }      

 código del componente 

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table >

ตัวเลือกตาราง

ส่วนประกอบตาราง paginated ยอมรับวัตถุ PaginableTableOptions เพื่อปรับแต่งสไตล์และพฤติกรรมผ่าน @Input() options ที่มีผลผูกพัน

ตัวเลือกที่มีอยู่คือ:

• serverSidePagination - เปิดใช้งานการปนเปื้อนฝั่งเซิร์ฟเวอร์ ค่าเริ่มต้นเป็นเท็จ

• cursor - สไตล์เคอร์เซอร์เมื่อโฮเวอร์แถว 'pointer' หรือ 'default'

• hoverableRows - เปิดใช้งานแถวไฮไลต์บนโฮเวอร์ ค่าเริ่มต้น false

• striped - ตารางลาย 'rows' หรือ 'columns'

• variant - ตัวแปรสีสำหรับตารางสไตล์ ยอมรับค่า string ใด ๆ

ตัวอย่างเช่น:

 @Component({

  // ...

})
export class TableComponent {

  options: PaginableTableOptions = {
    serverSidePagination: true,
    cursor: 'pointer',
    hoverableRows: true,  
    striped: 'columns',
    variant: 'dark'
  };

}

สิ่งนี้ช่วยให้การปนเปื้อนฝั่งเซิร์ฟเวอร์, แถวโฉบ, แถบคอลัมน์, เคอร์เซอร์แบบกำหนดเองและตัวแปรธีมมืด

คุณสมบัติ variant อนุญาตให้ใช้การปรับเปลี่ยนสีที่กำหนดเองกับตารางโดยผ่านค่าสตริงใด ๆ ตัวเลือกทั่วไปบางอย่างคือ 'primary' , 'secondary' , 'success' , 'danger' ฯลฯ

สิ่งนี้ให้ความยืดหยุ่นในการปรับแต่งรูปแบบตารางตามระบบการออกแบบหรือข้อกำหนดของธีมของคุณ

สร้างส่วนหัว

ส่วนหัวสำหรับตาราง paginated ได้รับการกำหนดค่าโดยผ่านอาร์เรย์ของวัตถุ PaginableTableHeader

แต่ละส่วนหัวสามารถมีคุณสมบัติดังต่อไปนี้:

• title - ข้อความที่จะแสดงในเซลล์ส่วนหัว

• property - การแมปคีย์ไปยังคุณสมบัติในข้อมูลแถว

• icon - ไอคอนเสริมที่จะแสดงถัดจากข้อความชื่อเรื่อง

• align - การจัดตำแหน่งของข้อความไม่ว่าจะ 'start' , 'center' หรือ 'end' ค่าเริ่มต้นคือ 'start'

• sortable - ไม่ว่าจะเป็นคอลัมน์หรือไม่ ค่าเริ่มต้นเป็น false

• wrapping - ข้อความในคอลัมน์สามารถห่อได้หรือไม่ ไม่ว่าจะ 'wrap' หรือ 'nowrap' ค่าเริ่มต้นคือ 'nowrap'

• sticky - ติดส่วนหัวกับ 'start' หรือ 'end' ของตารางเมื่อเลื่อน

• buttons - อาร์เรย์ของปุ่มหรือแบบเลื่อนลงเพื่อแสดงในส่วนหัว

• filter - เพิ่มการกรองสำหรับคอลัมน์ สามารถเป็นทั้ง InputFilter หรือ DropdownFilter

• onlyButtons - ซ่อนชื่อและแสดงปุ่มที่กำหนดค่าเท่านั้น

การกรอง

คุณสมบัติ filter บนส่วนหัวสามารถใช้เพื่อเปิดใช้งานการกรองสำหรับคอลัมน์ มีตัวกรองสองประเภท:

ตัวกรองอินพุต

ตัวกรองอินพุตแสดงอินพุตข้อความในส่วนหัว:

 filter: {
  type: 'text',
  key: 'name',
  placeholder: 'Filter names...' 
}

type สามารถเป็น 'text' , 'number' , 'date' ฯลฯ

ตัวกรองแบบเลื่อนลง

ตัวกรองแบบเลื่อนลงแสดงการเลือกแบบเลื่อนลงในส่วนหัว:

 filter: {
  type: 'dropdown',
  key: 'category',
  options: [
    { label: 'Electronics', value: 'electronics' },
    { label: 'Furniture', value: 'furniture' }
  ]
}

options สามารถเป็นอาร์เรย์สัญญาหรือสังเกตได้ซึ่งให้ตัวเลือกสำหรับการเลือก

สิ่งนี้อนุญาตให้เพิ่มตัวเลือกการกรองที่หลากหลายสำหรับส่วนหัวของตาราง paginated

โหมดกรอง

mode ควบคุมที่ตัวกรอง UI ปรากฏขึ้นไม่ว่าจะเป็นแบบอินไลน์ในเซลล์ส่วนหัวหรือในเมนูที่สลับ:

โหมดอินไลน์

mode: 'row' จะแสดงตัวกรองแบบอินไลน์ฝังโดยตรงในเซลล์ส่วนหัว:

 filter: {
  mode: 'row',
  type: 'text',
  key: 'name'
}

สิ่งนี้จะแสดงตัวกรอง UI โดยตรงในเซลล์ส่วนหัวสำหรับคอลัมน์นั้น

โหมดเมนู

mode: 'menu' จะซ่อนตัวกรอง UI ด้านหลังเมนูสลับ:

 filter: {
  mode: 'menu',  
  type: 'text',
  key: 'name'
}

นี่เป็นการเพิ่มปุ่มสลับเมนูไปยังส่วนหัว เมื่อคลิกจะเปิดแผงที่แสดง UI ตัวกรอง

โหมดเมนูมีประโยชน์สำหรับการซ่อนฟิลเตอร์ด้านหลังสลับและทำให้ส่วนหัวมีขนาดกะทัดรัดมากขึ้น

โดยสรุป:

• mode: 'row' แสดงตัวกรองแบบอินไลน์ในเซลล์ส่วนหัว
• mode: 'menu' ซ่อนตัวกรอง UI ด้านหลังเมนูสลับ

ตัวเลือก mode ให้ความยืดหยุ่นในการแสดง UI ตัวกรองในส่วนหัว

การกระทำของแบทช์

อินพุต batchActions อนุญาตให้กำหนดปุ่มการกระทำและแบบเลื่อนลงที่ใช้กับแถวที่เลือกในปัจจุบัน

ต้องใช้อาร์เรย์ของวัตถุ PaginableTableDropdown แต่ละอันกำหนดค่าแบบเลื่อนลงด้วยปุ่มการกระทำ:

@ Component ( {

  // ...

} )
export class TableComponent {

  batchActions : PaginableTableDropdown [ ] = [

    // Dropdown with action buttons
    {
      buttons : [
        {
          icon : 'fa fa-pencil' , 
          title : 'Edit' ,
          handler : ( ) => {
            // edit selected rows  
          }
        } ,
        {
          icon : 'fa fa-trash' ,
          title : 'Delete' ,
          color : 'danger' , 
          handler : ( ) => {
            // delete selected rows
          }
        }
      ]
    } ,

    // Single action button
    {
      icon : 'fa fa-file-export' ,
      title : 'Export' ,
      handler : ( ) => {
        // export selected rows
      }
    }

  ] ;

} 

 < paginable-table
	[headers] =" headers "
	[rows] =" items "
	[batchActions] =" batchActions "
	[(ngModel)] =" selected "
>
</ paginable-table >

แต่ละปุ่มยอมรับคุณสมบัติสำหรับ icon title color และ handler

วิธี handler จะได้รับอาร์เรย์ของแถวที่เลือกเป็นอาร์กิวเมนต์

สิ่งนี้ช่วยให้สามารถดำเนินการจำนวนมากในแถวที่เลือกในปัจจุบันในตาราง

อินพุต

ชื่อ	พิมพ์	ค่าเริ่มต้น	ที่จำเป็น	คำอธิบาย
ตัวเลือก	paginabletableoptions	-	เท็จ	อนุญาตให้ปรับแต่งรูปแบบของตารางพฤติกรรมและกลยุทธ์การแบ่งหน้าผ่านชุดคุณสมบัติที่ยืดหยุ่น
ส่วนหัว	Paginabletableheader	-	จริง	ค่าบูลีนที่กำหนดว่าตารางจะแสดงส่วนหัวคอลัมน์หรือไม่
การปนเปื้อน	PaginabletablePagination | <paginabletablePagination> ที่สังเกตได้>	-	จริง	ค่าบูลีนที่กำหนดว่าตารางจะแสดงการควบคุมการปนเปื้อนหรือไม่
การบวช	paginabletableordination	-	เท็จ	วัตถุที่แสดงถึงการบวชเริ่มต้น
แถว	อาร์เรย์ <any>	โมฆะ	จริง	อาร์เรย์ของวัตถุแต่ละวัตถุแสดงแถวในตาราง en este caso la paginación se generaráautomáticamente
การแบตช์	อาร์เรย์ <PaginableTeabledropDown | PaginabletableButton>	-	เท็จ	อาร์เรย์ของวัตถุแต่ละวัตถุแสดงการกระทำของแบตช์ที่สามารถนำไปใช้กับหลายแถวในครั้งเดียว
PerpageOptions	อาร์เรย์ <Gumber>	[10, 20, 50, 100]	เท็จ	อาร์เรย์ของตัวเลขแต่ละหมายเลขแสดงถึงตัวเลือกสำหรับจำนวนแถวที่ควรแสดงต่อหน้า
ตอบสนอง	'xs' | 'SM' | 'MD' | 'lg' | 'xl'	โมฆะ	เท็จ	ค่าบูลีนที่กำหนดว่าตารางจะตอบสนองต่อขนาดหน้าจอที่แตกต่างกันหรือไม่
รหัสประจำตัว	สาย	โมฆะ	เท็จ	ค่าสตริงที่ใช้เป็นตัวระบุสำหรับอินสแตนซ์ส่วนประกอบตาราง
showearchInput	บูลีน	จริง	เท็จ	ค่าบูลีนที่กำหนดว่าอินพุตการค้นหาจะปรากฏขึ้นที่ด้านบนของตารางหรือไม่
เลือกได้	บูลีน	เท็จ	เท็จ	กำหนดว่าสามารถเลือกแถวได้หรือไม่โดยคลิกที่พวกเขา
หลายรายการ	บูลีน	เท็จ	เท็จ	กำหนดว่าสามารถเลือกหลายแถวหลายแถวได้ในครั้งเดียวโดยคลิกที่พวกเขา
SelectableProperty	สาย	โมฆะ	เท็จ	ชื่อของคุณสมบัติในวัตถุแต่ละแถวซึ่งระบุว่าสามารถเลือกได้หรือไม่
การปนเปื้อน	'ด้านล่าง' | 'Top' | 'ทั้งคู่'	'ด้านล่าง'	เท็จ	ตำแหน่งที่ควรแสดงการควบคุมการปนเปื้อน (เช่น "ด้านบน" หรือ "ด้านล่าง")
PaginationInfo	บูลีน	จริง	เท็จ	กำหนดว่าข้อมูลการปนเปื้อนจะปรากฏขึ้นหรือไม่
Searchkeys	อาร์เรย์	-	เท็จ	กำหนดคุณสมบัติที่การค้นหาจะต้องดำเนินการเมื่อการปนเปื้อนดำเนินการโดยส่วนประกอบของตัวเอง พวกเขาสามารถเป็นคุณสมบัติที่ไม่รวมอยู่ในส่วนหัว

เอาต์พุต

เอาท์พุท	พิมพ์	คำอธิบาย
(itemclick)	T	ถูกไล่ออกเมื่อมีการเพิ่มรายการในขณะที่ [multiple]="true" รายการที่เพิ่มเอาต์พุต
(Onpageclick)	ตัวเลข	ถูกไล่ออกจากการเลือกเบลอ
(onSelected)	t | อาร์เรย์	ทริกเกอร์เมื่อเลือกแถวแถวหรือหลายแถวหรือไม่เลือก
(OnParamschange)	PaginationparamschangeEvent	ทริกเกอร์เมื่อมีการบวชหรือเปลี่ยนหน้า
(FilterChange)	FilterChangeEvent	ทริกเกอร์เมื่อตัวกรองเปลี่ยนไป

วิธีการ

ชื่อ	คำอธิบาย
เปิด	เปิดแผงควบคุมแบบเลื่อนลง
ปิด	ปิดแผงเลื่อนแบบเลือก
จุดสนใจ	มุ่งเน้นองค์ประกอบที่เลือก
เบลอ	เบลอองค์ประกอบที่เลือก

เทมเพลต

แต่ละเทมเพลตต่อไปนี้สามารถใช้เพื่อวัตถุประสงค์ที่แตกต่างกัน:

ไม่มีข้อความข้อมูล

แม่แบบข้อความข้อมูลไม่สามารถใช้เพื่อแสดงข้อความที่กำหนดเองเมื่อไม่พบผลลัพธ์

 < paginable-table [rows] =" [] " [headers] =" headers " >
	< ng-template paginableTableNotFound >
		< div class =" d-flex flex-column p-4 text-center " >
			< img src =" https://media.giphy.com/media/3ohA2ZD9EkeK2AyfdK/giphy.gif " alt =" Sorry! " class =" m-auto "
				style =" width: 256px; " >
			< div >
				< i class =" fa fa-info-circle " aria-hidden =" true " > </ i > Nothing has been found...
			</ div >
		</ div >
	</ ng-template >
</ paginable-table >

ส่วนหัว

เทมเพลตเซลล์ส่วนหัวสามารถใช้ในการปรับแต่งแต่ละเซลล์ภายในส่วนหัว

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableHeader header =" name " let-header =" header " >
		< div class =" animate-character " > Name </ div >
	</ ng-template >
</ paginable-table >

แถว

เทมเพลตแถวสามารถใช้เพื่อปรับแต่งเนื้อหาทั้งหมดของแถว

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableRow let-item >
		< tr >
			< td >
				< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
			</ td >
			< td > {{ item.name }} </ td >
			< td > {{ item.email }} </ td >
			< td >
				< a class =" btn btn-link " (click) =" item.unfold  = !item.unfold " >
					< i class =" fa " [ngClass] =" {'fa-chevron-down': !item.unfold, 'fa-chevron-up': item.unfold} " > </ i >
				</ a >
			</ td >
		</ tr >
		< ng-container *ngIf =" item.unfold " >
			< tr >
				< td colspan =" 4 " >
					Columna personalizada
				</ td >
			</ tr >
			< tr >
				< td >
					Columna personalizada 1
				</ td >
				< td >
					Columna personalizada 2
				</ td >
				< td >
					Columna personalizada 3
				</ td >
				< td >
				</ td >
			</ tr >
		</ ng-container >
	</ ng-template >
</ paginable-table >

ห้องขัง

เทมเพลตเซลล์สามารถใช้ในการปรับแต่งแต่ละเซลล์ภายในแถว

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableCell header =" avatar " let-item =" item " >
		< img
			[src] =" 'assets/avatars/64_' + ((item.id % 16) + 1) + '.png' "
			[alt] =" item.name "
		/>
	</ ng-template >
	< ng-template paginableTableCell header =" name " let-property =" property " >
		< span class =" badge badge-pill badge-info " > customized column </ span >
		{{ property }}
	</ ng-template >
	< ng-template paginableTableCell header =" email " let-item =" item " >
		{{ item.email }}
		< span class =" badge badge-pill badge-warning " > also customized </ span >
	</ ng-template >
</ paginable-table >

การโหลด

เทมเพลตการโหลดสามารถใช้เพื่อแสดงภาพเคลื่อนไหวกำลังโหลดในขณะที่ผลลัพธ์กำลังถูกดึง

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
	< ng-template paginableTableLoading >
		< div class =" text-center " >
			< img src =" ../images/loading.svg " >
		</ div >
	</ ng-template >
</ paginable-table >

ข้อความแสดงข้อผิดพลาด

เทมเพลตข้อความแสดงข้อผิดพลาดสามารถใช้เพื่อแสดงข้อความแสดงข้อผิดพลาดที่กำหนดเองหากมีปัญหาการดึงผลลัพธ์

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
	< ng-template paginableTableError >
		< div class =" text-center " >
			< img src =" ../images/error.svg " >
		</ div >
	</ ng-template >
</ paginable-table >

แถวขยายได้

เทมเพลตแถวที่ขยายได้สามารถใช้เพื่อกำหนดเนื้อหาที่ปรากฏเมื่อมีการขยายแถว

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableExpandingRow let-item =" item " >
		< tr class =" bg-warning " >
			< td [attr.colspan] =" headers.length + 1 " >
				< div class =" d-flex " >
					< div class =" align-self-center pr-4 " >
						< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
					</ div >
					< div class =" flex-grow " >
						< h3 > {{ item.email }} </ h3 >
						< h4 > {{ item.name }} </ h4 >
					</ div >
				</ div >
			</ td >
		</ tr >
	</ ng-template >
	< ng-template paginableTableExpandingRow let-item =" item " >
		< tr class =" bg-warning " >
			< td [attr.colspan] =" headers.length + 1 " class =" bg-success " >
				< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo leo eget elementum
					condimentum.
				</ p >
			</ td >
		</ tr >
	</ ng-template >
</ paginable-table >

ตัวกรอง

เทมเพลตตัวกรองสามารถใช้ในการปรับแต่งลักษณะและพฤติกรรมของตัวกรองสำหรับแต่ละคอลัมน์

 < paginable-table
	(filterChange) =" onFilterChange($event) "
	(onParamsChange) =" fetch($event) "
	[selectable] =" true "
	[headers] =" headers "
	[pagination] =" pagination "
>
	< ng-template
		paginableTableFilter
		header =" email "
		let-header =" header "
		let-formControl =" formControl "
	>
		...
		< div
			class =" form-check "
			*ngFor =" let option of header.filter.options | async "
		>
			< input
				class =" form-check-input "
				type =" checkbox "
				[value] =" option.value "
				[formControl] =" formControl "
			/>
			< label class =" form-check-label " >
				{{ option.text }}
			</ label >
		</ div >
	</ ng-template >
	...
</ paginable-table > 

อื่น

นี่คือเอกสารสำหรับรายการ ng-paginable ในภาษาอังกฤษ:

รายการ NG-PAGINABLE

ส่วนประกอบ ng-paginable-list ช่วยให้ข้อมูลการเรนเดอร์ในรายการลำดับชั้นที่ซ้อนกัน

การใช้งานขั้นพื้นฐาน

หากต้องการใช้เพียงแค่ส่งโครงสร้างข้อมูลไปยังอินพุต tree :

 < ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > 

 data = [
  {
    label : 'Item 1' , 
    children : [
      { label : 'Subitem 1' } ,
      { label : 'Subitem 2' } ,
    ]
  } ,
  {
   label : 'Item 2'
  }
] ;

สิ่งนี้จะสร้างรายการด้วยรายการและรายการย่อย

ตัวเลือก

ตัวเลือกที่มีอยู่คือ:

• bindLabel - คุณสมบัติของวัตถุรายการที่จะใช้เป็นฉลาก
• selectable - เปิดใช้งานการเลือกเดี่ยวหรือหลายครั้ง ค่า: 'single' | 'multiple'

เอาต์พุต

ปล่อยเหตุการณ์ต่อไปนี้:

• itemClick - เมื่อคลิกรายการ ส่งคืนรายการและสถานะที่ยุบ

การปรับแต่ง

คุณสามารถใช้เทมเพลตเพื่อปรับแต่งมาร์กอัปสำหรับแต่ละรายการ:

 < ng80-paginable-list
  [tree] =" data "
  [selectable] =" 'multiple' "
  (itemClick) =" onSelect($event) " >

  < ng-template listItemTpt let-item >
    < div class =" custom " >  
      {{item.label}}
    </ div >
  </ ng-template >
  
</ ng80-paginable-list >

สิ่งนี้ช่วยให้สามารถปรับแต่งรายการที่แสดงผลได้อย่างสมบูรณ์

การรวมเข้ากับแบบฟอร์ม

ส่วนประกอบใช้ ControlValueAccessor เพื่อรวมเข้ากับรูปแบบปฏิกิริยา

ค่าที่เลือกจะมีอยู่ใน formControl

การเข้าถึงได้

ส่วนประกอบจัดการการโฟกัสและการนำทางแป้นพิมพ์อย่างเหมาะสมเพื่อการเข้าถึงที่ดี

ป้ายกำกับการแปล

NG-Paginable รวมฉลากที่กำหนดไว้ล่วงหน้าเป็นภาษาอังกฤษและสเปนที่ใช้ใน UI ของส่วนประกอบ

ฉลากเหล่านี้สามารถแทนที่ได้อย่างง่ายดายเพื่อรองรับภาษาอื่น ๆ หรือการแปลที่กำหนดเอง

การแปลเริ่มต้น

โดยค่าเริ่มต้น NG-Paginable ใช้ภาษาของเบราว์เซอร์เพื่อเลือกระหว่างภาษาอังกฤษและสเปน สิ่งนี้จะแสดงฉลากเริ่มต้นโดยไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติม

ปรับแต่งการแปล

คุณสามารถให้คำแปลที่กำหนดเองไปยัง PaginableTranslationService :

@ Component ( {
  // ..
} )
export class AppComponent {

  constructor ( private translationService : PaginableTranslationService ) {

    this . translationService . setTranslation ( {
      first : 'First' ,
      prev : 'Previous' , 
      next : 'Next' ,
      last : 'Last'
      // ...
    } ) ;

  }

}

สิ่งนี้จะแทนที่ฉลากเริ่มต้น

การรวมเข้ากับไลบรารีการแปล

ในการรวม NG-paginable กับไลบรารีการแปลเช่น NGX-Translate คุณสามารถสมัครรับการเปลี่ยนแปลงภาษา:

@ Component ( {
  // ...  
} )
export class AppComponent {

  constructor (
    private translate : TranslateService ,
    private translationService : PaginableTranslationService
  ) {

    this . translate . onLangChange . subscribe ( ( event ) => {

      this . translate . get ( 'PAGINATION' ) . subscribe ( ( translations ) => {
        this . translationService . setTranslation ( translations ) ;
      } )

    } ) ;

  }

}

ด้วยวิธีนี้เมื่อภาษาเปลี่ยนไปในแอพจะมีการอัปเดตฉลากการแบ่งหน้า

สิ่งนี้ช่วยให้การแปลที่สมบูรณ์แบบรวมผ่าน UI

API แปล

PaginableTranslationService เปิดเผยวิธีการต่อไปนี้:

 setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific label

สิ่งนี้ให้การควบคุมอย่างเต็มที่เกี่ยวกับฉลากและภาษาที่ใช้โดยส่วนประกอบ

ด้วย API ที่ยืดหยุ่นนี้มันตรงไปตรงมาเพื่อรวม NG-paginable เข้ากับกลยุทธ์การแปลใด ๆ

การกำหนดค่า (ไม่บังคับ)

นอกจากนี้คุณยังสามารถตั้งค่าข้อความการกำหนดค่าและการแปลทั่วโลกโดยผ่านการกำหนดค่าไปยังวิธีการ forroot ของ ngpaginableModule โดยทั่วไปในส่วนประกอบรูทของคุณและปรับแต่งค่าของคุณสมบัติเพื่อให้ค่าเริ่มต้น

  @ NgModule ( {
	declarations : [ UserListComponent ] ,
	imports : [
		CommonModule ,
		NgPaginableModule . forRoot ( {
			mapping : {
				currentPage : 'page' ,
				data : 'content' ,
				lastPage : 'last' ,
				total : 'total'
			}
		} )
	] ,
	exports : [ UserListComponent ] ,
	providers : [ ]
} )
export class UserListModule { } 

เปลี่ยนการตรวจจับ

ส่วนประกอบ NG-paginable ใช้การตรวจจับการเปลี่ยนแปลง OnPush ซึ่งหมายความว่าการตรวจสอบสกปรกตรวจสอบชนิดข้อมูลที่ไม่เปลี่ยนรูป นั่นหมายความว่าถ้าคุณทำการกลายพันธุ์ของวัตถุเช่น:

 this . rows . push ( { id : 1 , name : 'New item' } )

ส่วนประกอบจะไม่ตรวจจับการเปลี่ยนแปลง คุณต้องทำ:

 this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; 

ที่สร้างแรงบันดาลใจ

ส่วนประกอบนี้ถูกสร้างขึ้นเพื่อให้นักพัฒนาสามารถแสดงข้อมูลจากวัตถุ Laravel paginated ได้ง่ายขึ้นในตารางเชิงมุมโดยไม่ต้องเขียนรหัสที่กำหนดเอง เมื่อเวลาผ่านไปมีการเพิ่มตัวเลือกสำหรับการกำหนดค่าเพื่อให้ง่ายต่อการใช้งานกับเฟรมเวิร์กใด ๆ หรือด้วยโครงสร้างการปนเปื้อนที่กำหนดเอง

สนับสนุน

หากคุณพบว่าห้องสมุดนี้มีประโยชน์และต้องการสนับสนุนการพัฒนาลองซื้อกาแฟให้ฉัน ขอบคุณสำหรับการสนับสนุน!

เกี่ยวกับผู้แต่ง

Carlos Morcillo เป็นผู้พัฒนาเว็บและผู้สนับสนุนโอเพ่นซอร์ส คุณสามารถหางานของเขาได้มากขึ้นในเว็บไซต์นี้