Открыть и закрыть компонент оповещения ng-bootstrap (ngb-alert)

Question

Рассмотрим следующий StackBlitz:

AlertComponent

Как мы видим, у нас есть две кнопки, которые показывают или скрывают предупреждение. Проблема заключается в том, что при закрытии предупреждения через символ закрытия (X) предупреждение не отображается снова, даже если вы нажмете кнопку false. Чтобы снова показать предупреждение, я должен нажать кнопку «истина», а затем кнопку «ложь», чтобы это предупреждение снова показывалось. Почему это происходит? Я хотел бы объяснения. Спасибо!

Answer 1

Я нашел проблему. Когда вы нажимаете на знак выхода внутри AlertComponent , вы только запускаете изменение в staticAlertClosed переменной, но не изменяете значение переменной в AppComponent .

Есть несколько способов исправить это, но вот что я сделал.

ссылка на Stackblitz - https://stackblitz.com/edit/angular-to9vlk-nyog3i?embed=1&file=app/app.component.html

Я подключил выходное событие к переменной в AppComponent. См. Исходный код для получения дополнительной информации

Answer 2

Флаг staticAlertClosed для внутреннего компонента является входным, но внутренний компонент меняет свое значение, поэтому

• установка внешнего значения на false нажатием кнопки false передает ложное значение в качестве входных данных внутреннему компоненту, и отображается предупреждение. Значения флагов: false во внешнем компоненте и false во внутреннем компоненте.
• закрытие предупреждения с помощью кнопки закрытия устанавливает флаг внутреннего компонента в значение true, и предупреждение исчезает. Значения флагов: false во внешнем компоненте и true во внутреннем компоненте.
• нажатие кнопки false во внешнем компоненте устанавливает значение внешнего флага в false. Но значение было уже ложным. Таким образом, значение не изменяется, и Angular, таким образом, не передает значение на вход внутреннего компонента: оно не изменилось. Это объясняет проблему. Значения флагов: false во внешнем компоненте и true во внутреннем компоненте.
• нажатие кнопки true приводит к изменению значения флага во внешнем компоненте. Так что это снова передается на внутренний компонент. Значения флагов: true во внешнем компоненте и true во внутреннем компоненте.
• нажатие кнопки false приводит к изменению значения флага во внешнем компоненте. Так что это снова передается на внутренний компонент. Значения флагов: false во внешнем компоненте и false во внутреннем компоненте. Предупреждение отображается снова.

Короче говоря: не изменяйте значение входа от компонента, получающего этот вход. Только родительский компонент должен изменять входное значение. Чтобы это исправить, вы можете использовать двунаправленную привязку. Вот демо .