如何使用Component和Directive使用angular创建自定义下拉列表

时间:2019-05-20 15:44:16

标签: angular angular-directive lifecycle angular2-ngcontent

感谢读给我:)

我正在尝试创建一个带角度的下拉组件。我从范围触发触发器,并将其从指令(clickOutOf)中删除。 我有两个问题:

  1. 当我触发下拉菜单时,将创建它并触发下一个clickOutOf指令。所以我的下拉菜单不会出现,因为我的按钮不在下拉菜单中。

  2. 当我的下拉菜单出现时,我无法检查目标是下拉菜单的入还是出。我的指令始终“认为”我的目标不在下拉列表中。因此,当我单击任意位置时,它都会被删除。

这里是stackblitz的链接:https://stackblitz.com/edit/angular-nvzwjl 如果您点击按钮,则会显示下拉列表

要查看第一个问题,只需将dropdown / dropdown.component.ts转到close()函数中,然后取消注释this.active = false; =>单击该按钮,则不会出现下拉菜单...(我认为这是因为它出现了,但紧随其后的是,它被我的指令删除了。因为我的跨度不属于我的下拉列表。 更新:我发现了一个解决方案,只需将以下代码添加到下拉组件中:

openDropdwon()
{
    setTimeout(() => this.active = true);
}

但是我不是很满意……这不是一个好习惯,我认为有更好的解决方案。让我们讨论一下您是否拥有adea:)

要查看第二个问题,只需将构造函数中的this.active = false更改为this.active = true。我们可以看到该下拉列表会自动出现,但始终会消失(即使单击下拉列表也是如此)。我想这是因为* ngFor谁在检查块是否包含目标之前重新创建了组件...但是我不知道该如何更改...有人可以帮助我吗?

我是新手,感谢您,我真的需要帮助;)

0 个答案:

没有答案