Question

我正在使用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>

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

因此，在警报显示并显示事件后消失了（我也尝试在事件中进行此操作），我必须刷新整个页面才能再次显示警报？

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

我想念什么吗？这是预期的行为吗？

Answer 1

您可能未将staticAlertClosed设置为true。确保只要要显示错误/成功消息就执行语句。

this.staticAlertClosed = true;

Answer 2

它可以是配置的行为，也是预期的。但是，这里有太多未知数无法确切说明。首先，将外部*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 page上看到这些示例。

ng-bootstrap警报消失，直到刷新整个页面

2 个答案: