打开和关闭ng-bootstrap警报组件（ngb-alert）

Question

考虑以下StackBlitz：

AlertComponent

我们可以看到有两个按钮可以显示或隐藏警报。问题在于，通过关闭符号（X）关闭警报时，即使您按了错误按钮，警报也不会再次显示。为了再次显示警报，我必须按下按钮true，然后按下按钮false，以便再次显示此警报。为什么会这样呢？我想要一个解释。谢谢！

Answer 1

内部组件的staticAlertClosed标志是输入，但是内部组件更改其值，因此

• 通过按假按钮将外部值设置为假，会将假值作为输入传递给内部组件，并显示警报。标志的值在外部组件中为false，在内部组件中为false。
• 使用其关闭按钮关闭警报会将内部组件标志设置为true，从而使警报消失。标志的值在外部组件中为false，在内部组件中为true。
• 单击外部组件中的false按钮会将外部标志的值设置为false。但是该值已经为假。因此值不会改变，因此Angular不会将值传递给内部组件的输入：它没有改变。这就说明了问题。标志的值在外部组件中为false，在内部组件中为true。
• 单击“ true”按钮会使外部组件中的标志值更改。因此，它再次传递给内部组件。标志的值在外部组件中为true，在内部组件中为true。
• 单击错误按钮会使外部组件中的标志值更改。因此，它再次传递给内部组件。标志的值在外部组件中为false，在内部组件中为false。该警报正在重新显示。

简而言之：不要修改来自接收该输入的组件的输入值。仅父组件应修改输入值。要解决此问题，您可以使用双向绑定。 这是a demo。

Answer 2

我发现了一个问题。在AlertComponent 中单击退出标志时，您只会触发staticAlertClosed变量的更改，但不会在AppComponent中更改变量的值。

有几种方法可以修复它，但这是我所做的。

Stackblitz链接-https://stackblitz.com/edit/angular-to9vlk-nyog3i?embed=1&file=app/app.component.html

我已经将输出事件与AppComponent中的变量挂钩。请参阅源代码以获取更多信息