如何使用指令订阅组件的某个事件

Question

这是我的组件分页。

<pagination
[boundaryLinks]="true"
[(ngModel)]="currentPage"
[totalItems]="100"
previousText="&lsaquo;"
nextText="&rsaquo;"
firstText="&laquo;"
lastText="&raquo;"
(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中的值，供参考的是表名(table2)并滚动到表的头部。但我没有得到我怎么能知道在我的指令当页面发生变化并执行功能。需要一些帮助。谢谢你:)

Answer 1

你不应该传递"表名";否则为表的元素。为此，您可以使用模板引用变量

但是Angular不允许在名字中使用-，所以你应该先把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()
}
}