angular - 打开和关闭 ng-bootstrap 警报组件 (ngb-alert)

Question

考虑以下 StackBlitz：

警报组件

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

标签： angularng-bootstrap

Answer 1

内部组件的 staticAlertClosed 标志是一个输入，但是内部组件改变了它的值，所以

• 通过按下 false 按钮​​将外部值设置为 false 将 false 值作为输入传递给内部组件，并且正在显示警报。标志的值false在外部组件和false内部组件中。
• 使用其关闭按钮关闭警报会将内部组件标志设置为 true，从而使警报消失。标志的值false在外部组件和true内部组件中。
• 单击false外部组件中的按钮会将外部标志的值设置为 false。但是这个值已经是假的了。所以值不会改变，因此 Angular 不会将值传递给内部组件的输入：它没有改变。这就解释了问题。标志的值false在外部组件和true内部组件中。
• 单击 true 按钮会使外部组件中的标志值发生变化。所以它再次传递给内部组件。标志的值true在外部组件和true内部组件中。
• 单击 false 按钮​​会使外部组件中的标志值发生变化。所以它再次传递给内部组件。标志的值false在外部组件和false内部组件中。正在重新显示警报。

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