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

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(){
  }
}

现在在我的指令中获取元素后，我想使用我的分页中的值作为参考 table name(tableTwo) 并滚动到 table。但是当页面更改并执行功能时，我不知道如何在我的指令中知道。需要一些帮助。谢谢:)

Answer 1

您不应传递“table 名称”，否则应传递 table 的 elementRef。为此，您可以使用模板引用变量

但是 Angular 不允许在名字中使用 - 所以你应该先改变 a 像这样，例如table参考

然后只需在您的指令中使用一个输入

@Input() tableRef:any

你的main.component变得像

<table #tableHead">
...
</table>

<pagination
  ...
  [tableRef]="tableHead"
></pagination>

然后你使用 like

@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()
  }
}

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

How to Subscribe to some event of component using a Directive

angular-directive

angular

angular12