這是我的組件分頁。
<pagination
[boundaryLinks]="true"
[(ngModel)]="currentPage"
[totalItems]="100"
previousText="‹"
nextText="›"
firstText="«"
lastText="»"
(pageChanged)="pageChanged($event)"
[maxSize]="5"
my-pagination="tableTwo"
></pagination>
這是我的指令
@Directive ({
selector: "pagination[my-pagination]"
})
export class MyPagination {
constructor( private el: ElementRef){
console.log(this.el.nativeElement.getAttribute('my-pagination'))
}
ngOnInit(){
}
}
現在，在我的指令中獲取元素后，我想使用 my-pagination 中的值作為參考，該值是表名（tableTwo）并滾動到表的標題。但是當頁面更改并執行功能時，我不知道如何在我的指令中知道。需要一些幫助。謝謝 ：）
uj5u.com熱心網友回復：
您不應該傳遞“表名”，否則應該傳遞表的 elementRef。為此，您可以使用模板參考變數
但是 Angular 不允許使用-in 名稱，因此您應該先更改 a 之類的，例如 tableRef
然后只需在指令中使用輸入
@Input() tableRef:any
你的 main.component 變得像
<table #tableHead">
...
</table>
<pagination
...
[tableRef]="tableHead"
></pagination>
你用喜歡
@Directive ({
selector: "pagination[my-pagination]"
})
export class MyPagination implement AfterViewInit {
@Input() tableRef:any
constructor(){
}
ngAfterViewInit(){
if (this.tableRef)
this.tableRef.scrollIntoView()
}
}
注意：如果您不希望更改可以使用@attribute的變數
@Directive ({
selector: "pagination[my-pagination]"
})
export class MyPagination implement AfterViewInit {
constructor(@Optional()@Attribute('tableRef') private tableRef: any) {
ngAfterViewInit(){
if (this.tableRef)
this.tableRef.scrollIntoView()
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/467698.html