0

我正在使用 ng-bootstrap 并向组件添加了警报。

<div *ngIf="!staticAlertClosed" (close)="staticAlertClosed = true" 
     style="width:100%;white-space:nowrap;float:left">
    <ngb-alert style="float: left" [dismissible]="false" [type]="type"> 
         {{message}} 
    </ngb-alert>
</div>

如您所见，我添加了自关闭计时器

因此，在带有事件的警报显示然后消失（我也尝试过使用事件）之后，我必须刷新整页才能再次显示警报？

这似乎没有用，因为我可能想在用户纠正问题时显示错误警报，然后显示成功警报。

我错过了什么吗？这是预期的行为吗？

4

2 回答 2

0

它可以是配置的行为和预期的。但是这里有太多的未知数，无法准确地说出。首先，您将外部*ngIf设置为staticAlertClosed- 单击时将其设置为 true。所以它会“永远”保持关闭 - 或者直到页面重新加载。如果要显示新警报，则必须再次将其设置为 false。

你已经在这样做了吗？如果不是，下面是它在示例组件中的外观：

const DEFAULT_ALERT_TIMEOUT = 3000; // expire message after 3 seconds.
export class MyComponent implements NgOnInit {
    message: string;
    type: string;
    staticAlertClosed = true; // do not show by default
    constructor(private messages: MessagesService) {} // inject a service which provides fresh messages

    ngOnInit() {
        // subscribe to the new messages
        this.messages.alerts$.subscribe(alert => {
            // new message
            this.message = alert.message;
            this.type = alert.type;
            this.staticAlertClosed = false;
            // auto-close if not error
            if (alert.type !== 'error') {
                setTimeout(() => this.staticAlertClosed, DEFAULT_ALERT_TIMEOUT)
            }
        });

另一种方法是跟踪消息并独立显示/隐藏每个消息。您可以在ng-bootstrap 页面上看到这些示例。

于 2018-10-16T17:52:49.223 回答
0

您可能没有设置staticAlertClosed为true. 确保每当您想显示错误/成功消息时都在执行该语句。

this.staticAlertClosed = true;
于 2018-10-16T17:47:38.630 回答