Question

我在Angular中创建了一个自定义手风琴组件，它采用以下形式：

<accordion>
    <drawerOne></drawerOne> 
    <drawerTwo></drawerTwo>
    <drawerThree></drawerThree>
    <drawerFour></drawerFour>
</accordion>

我想发布一些网络请求，但仅限于初始化抽屉的视图时。因为他们都是手风琴组件的孩子，他们的ngOnInit都被同时发射。

我想知道你们所想的可能是一个很好的方法来实现类似于每个抽屉一次ngOnInit点火的东西。

打开手风琴时可能会触发某种功能吗？我也想做lazy network requesting，如果这甚至是一件事。如果我转到drawerThree然后返回drawerTwo，我希望以前网络请求中的数据仍然存在或缓存，而不是必须再发出请求。

由于

Answer 1

由于没有提供代码我只是解释我的解决方案，希望它适合你

我假设你有两个用于accordion和accordionItem的组件并使用ng-content

<accordion>
    <accordion-item (onInitialized)="dosomethinghere()" (onActivate)="doAnotherthinghereonActivation()">
       <drawerOne></drawerOne> 
    <accordion-item/>
    <accordion-item>
       <drawerTwo></drawerTwo>
    <accordion-item/>
    <accordion-item>
       <drawerThree></drawerThree>
    <accordion-item/>
    <accordion-item>
       <drawerFour></drawerFour>
    <accordion-item/>
</accordion>

在accordion-item

onInitialized

在需要初始化时点火onInitialized
为它编写一些处理程序并加载数据
如果您希望每个抽屉加载数据，它会自动为它创建一个类似#drawerOne的引用，并在您的处理程序中调用该方法

通过这种方式，您还可以执行延迟数据加载和缓存数据

Answer 2

我能想到的最干净的是：

1 - 创建抽屉类

export abstract class Drawer {
  public abstract getContent();
}

2 - 让你的抽屉伸展

export class DrawerOne extends Drawer implementsOnInit {}
// You'll figure the 3 others ;)

3 - 按ViewChilds命名组件并触发单击

<drawerOne #D1 (click)="D1.getContent()"></drawerOne> 
<drawerTwo #D2 (click)="D2.getContent()"></drawerTwo>
<drawerThree #D3 (click)="D3.getContent()"></drawerThree>
<drawerFour #D4 (click)="D4.getContent()"></drawerFour>

这是做什么的？

这会强制您创建一个getContent方法（absrtact =您需要在子类中创建它），当您点击抽屉时，您会触发此方法并调用后端。所以基本上，你的点击有两个功能：打开/关闭抽屉，并加载其数据

<强> TODO

您必须在点击上创建一个条件，说当您关闭抽屉时，实际上取消订阅您的数据提取服务。我会让你处理，但如果你需要帮助，请告诉我！

ngOnInit和懒惰网络请求

2 个答案: