当指令在带有异步 pipe 的 ngIf 中时，如何获取指令的 ViewChildren

Question

我有一个组件，它基于带有异步 pipe 的 observable 呈现其内容。

<div *ngIf="equipment$ | async as equipment">
  <button myDirective></button>
</div>

在 .ts 文件中，我得到了所有的 MyDirective 孩子。 可以有任何数字。

@ViewChildren(MyDirective) actions!: QueryList<MyDirective>;

然后我想在 ngAfterViewInit 中访问它。

ngAfterViewInit(): void {
  console.log(this.actions)
}

这会记录一个包含 0 个项目的 QueryList。 如果我将指令放在我的 async pipe 之外，它一切正常：

<div *ngIf="equipment$ | async as equipment">
  // Some HTML here
</div>
<button myDirective></button>

有什么方法可以检索嵌套在异步 pipe 下的指令？ 我需要保留 ngIf，因为我将输入绑定到设备变量（包含属性）。

编辑：

所以，想来想去，我意识到我在这里要做的是重新创建 NgRx。 经过这么长时间认为它太复杂了，我现在明白了它带来的所有好处和它解决的问题。 我要提前 go 并尝试实现它！

Answer 1

您需要添加static: false因为它是动态呈现的组件：

@ViewChildren(MyDirective, { static: false }) actions!: QueryList<MyDirective>;

但是您不能确定该指令在 ngAfterView init 中是否可用。 因为equipment$可能需要一些时间...

也许你可以在 observable 中添加一个tap()并在那里做你的console.log()

Answer 2

您可以创建一个隐藏指令，让我解释一下：

    @Input() hide: boolean;

constructor(private renderer: Renderer2, private elRef: ElementRef) {
}

ngOnChanges() {
    if (this.hide) {
        this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
        this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
}

因为 hide 指令不会在 dom 上显示元素，但它仍然可以访问

Answer 3

西蒙，执行指令时，您无法访问不在屏幕中的元素。

当然你不能在 afterViewInit 中访问，因为条件仍然是假的。 所以，你有两种方法

1. 根据您的创建一个可观察的并使用 rxjs 操作员点击

   equipmentDone$=this.equipment$.pipe( tap((res:any)=>{..here you has yet your this.actions... //it's possible, I'm not pretty sure you need enclosed in a setTimeout setTimeout(()=>{..here sure, sure you has this.actions.. }) }) )

   并使用

   <div *ngIf="equipmentDone$ | async as equipment"> <button myDirective></button> </div>

2. 订阅 QueryList 的可观察变化

   ngAfterViewInit(){ this.actions.changes.subscribe(res=>{..here you has your actions.. }) }