Question

是否可以通过HTML将元素作为属性发送？例如：

在HTML中：

<ul>
    <li *ngFor="let item of items">
         <my-component [ngClass]="{'whatever': checkElement(my-component)}">
    </li>
</ul>

在ts文件中：

checkElement(el): boolean {
     // dummy code
     const size = el.getBoundingClientRect();
     return size.bottom > 100;
}

我知道有几种获取该元素的方法，但这将在巨大的循环中使用，我想防止在DOM中搜索该元素（如果可能）。

谢谢！

Answer 1

您可以使用模板引用变量来引用my-component，如下所示：

<my-component [ngClass]="{'whatever': checkElement(myComponentVariableName)}" #myComponentVariableName>

，并将其作为参数传递给方法checkElement()。请注意，此处myComponentVariableName的类型为HTMLInputElement。

从.ts文件访问该文件的另一种方法是像这样使用@ViewChild()：

@ViewChild('myComponentVariableName') myComponentVariable: ElementRef;`.

然后，您可以在组件内部的任何地方使用this.myComponentVariable。

如果您担心my-component中有多个*ngFor，可以将@ViewChild语句转换为如下列表：

@ViewChildren(my-component) myComponentList: QueryList<my-component>;

此外，按索引跟踪*ngFor，然后将索引和模板引用变量一起发送：

<li *ngFor="let item of items; let i=index;">
  <my-component [ngClass]="{'whatever': checkElement(myComponentVariableName, i)}" #myComponentVariableName>
</li>

在checkElement()方法内部，访问特定的my-component，例如myComponentList[i]。

Answer 2

当然，很简单：

ssms -S %SName% -d %DbName% -U %UName% -P %DbPWD%

export class ParentComponent {
  this = this;
}

现在在第二个组件中

<my-element [parentElement]="this">

角度：从HTML发送元素

2 个答案: