Question

我有这个非常基本的指令：

import { Directive, QueryList, ElementRef, HostListener, AfterViewInit, Input } from '@angular/core';

@Directive({
  selector: '[pyb-fixed-table]'
})
export class FixedTableDirective implements AfterViewInit {
  @Input('pybFixedTable') productTableElement: ElementRef;
  @Input('description') descriptionElements: QueryList<ElementRef> = new QueryList

  @HostListener('window:resize')
  onResize() {
    console.log('resize');
    this.addFixedClass();
    this.setElementWidths();
  }

  constructor() {
    console.log('hi');
  }

  ngAfterViewInit() {
    this.addFixedClass();
    this.setElementWidths();
  }

  private addFixedClass() {
    console.log(this.productTableElement);
  }

  private setElementWidths(): void {
    let tableWidth = this.productTableElement.nativeElement.offsetWidth;
    console.log(tableWidth);
    this.descriptionElements.forEach((element: ElementRef) => {
      let cell = element.nativeElement;
      if (!cell) return;

      cell.style.maxWidth = `${tableWidth}px`;
    });
  }
}

它已在我的 Shared.Module 中声明，并且已将其导出。如果我在这样的组件中使用它：

<div pyb-fixed-table>

一切都很好。但是如果我这样做：

<div [pyb-fixed-table]="productTable">

我得到一个错误：

由于它不是'div'的已知属性，因此无法绑定到'pyb-fixed-table'。

如果我改成这个：

<div pyb-fixed-table="productTable">

它似乎有效，但没有传递我的输入。我的输入是参考：

  <div pyb-fixed-table="productTable" *ngIf="rows">
    <div class="table-responsive" #productTable>

有人知道我在做什么错吗？

Answer 1

尝试

 <div pyb-fixed-table [productTableElement]="productTable" *ngIf="rows">

Answer 2

更改

@Input('pybFixedTable') productTableElement: ElementRef;

到

@Input('pyb-fixed-table') productTableElement: ElementRef;

然后尝试

未检测到角度指令

2 个答案: