Angular投影添加到DOM时如何捕获事件

Question

我有在 Popover/Overlay 中使用的组件。该组件需要根据其宽度和高度进行一些计算。问题是当在 Overlay 中创建的组件尚未附加到 DOM 时，因此所有宽度/高度均为 0。我需要在实际添加到 DOM 时捕获事件。我知道我可以使用 MutationObserver 来跟踪 DOM 突变，但我想看看是否有“更干净”的 Angular 方法。

更新： 详细说明我的组件在<ng-content> 内。因此，它在 DOM 之外创建，并且仅在创建父元素（具有 ng-content 标签）时才投射到 DOM 中。我创建了example。如果您打开控制台，您将看到“在模板中打开”按钮选项卡组件在弹出窗口打开时被初始化。但是对于“自定义触发器”组件（具有 ng-content）选项卡组件初始化为页面加载（此时它尚未附加到 DOM），并且当单击注入 DOM 的按钮选项卡但选项卡组件不知道它时。

Answer 1

我不太了解这个问题，但据我了解，父组件中正在发生一些弹出窗口，并且您希望元素 DOM 属性作为组件被插入。也许建议您使用 view child 并将其传递给另一个子组件或指令，然后等待输入更改。由于 DOM 值是从 null 改变的，因此 child 的 ngonchanges 生命周期钩子可以帮助您使用 view child 获取 DOM 值。

Parent.component.ts

  @ViewChild('#element',{static:false}) popover: ElementRef
    
    <child>
    [popover]="popover"
    </child>

child.component.ts 或任何指令

@Input popover:ElementRef = null;

ngonchanges(changes:Simplechanges){
if(changes['popover']){
//getupdated element
                }
}

更新答案：-

对于内容投影也是如此。我们使用 Content Child 而不是 view child 并使用 ngAfterContentInit() 而不是 ngAfterViewInit()

parent.component.html

<ng-content #readpopover></ng-content>

parent.component.ts

@ContentChild('readpopover') popoverdetails:ElementRef;

//user ngaftercontentinit lifecycle hook

    ngAfterContentInit(){
    console.log(popoverdetails);
    }

以上内容应根据 Angular 文档工作：-

ngAfterContentInit() 在 Angular 投射外部内容后响应 进入组件的视图，或者进入指令所在的视图。

请参阅响应本文档内容更改中的详细信息和示例。 https://angular.io/guide/lifecycle-hooks#lifecycle-event-sequence

如果上面不起作用，我发现另一种方法是使用自定义指令或虚拟组件，它接受内容子输入并监听 ngOnChanges() 上的输入更改并将更改发送回父级。虽然不推荐。

您可以在此处查看https://blog.angular-university.io/angular-ng-content/ 以执行带有内容投影的指令

只需使用自定义指令的 ngonchanges 钩子来发出更新的值