Question

我有一个订阅按钮，上面写有Subscribe文字。问题是页面重新加载订阅值时未显示。按钮的值由typescript代码控制。奇怪的是当我导航到文本神奇地出现的任何路线时。

HTML

<button type="button" (click)="subscribe()" name="subscribe" id="subscribe">
    <span *ngIf="!subscribeFormProcessing">Subscribe</span>
    <span *ngIf="subscribeFormProcessing"><img [src]="btnLoaderUrl"></span>
</button>

打字稿

export class FooterWidgetComponent implements OnInit, OnDestroy {

    subscribeEmailAddress: string;
    subscribeEmailSubscriber: any;
    btnLoaderUrl: string;
    subscribeFormProcessing = false;
    subscribeMsg: string;

    constructor(private appSettingsService: AppSettingsService, private httpRequestService: HttpRequestService) {
    }

    ngOnInit() {
        this.subscribeEmailAddress = '';
        this.subscribeMsg = '';
        this.btnLoaderUrl = this.appSettingsService.getImagesBaseUrl() + 'app/btn-loader.gif';
        this.subscribeEmailSubscriber = this.httpRequestService.requestCompleted.subscribe(data => {
            this.subscribeFormProcessing = false;
            if (data['status'] === "success") {
                this.subscribeMsg = data['message'];
            } else {
                this.subscribeMsg = data['message'];
            }
            this.clearSubscribeMessage()
        });
    }

    clearSubscribeMessage() {
        setTimeout(() => {
            this.subscribeMsg = '';
        }, 5000);
    }

    subscribe() {
        this.subscribeFormProcessing = true;
        this.httpRequestService.setUrl('subscribe');
        this.httpRequestService.sendPost({email: this.subscribeEmailAddress});
    }

    ngOnDestroy() {
        this.subscribeEmailSubscriber.unsubscribe();
    }

}

在页面重新加载

导航到任何路线后

根本原因 我正在使用Addthis小部件来分享帖子和博客。在博客页面上加载我初始化导致此特定问题的addthis。

initAddThisToolbar() {
        addthis.layers.refresh();
    }

HTML

<div class="addthis_inline_share_toolbox"></div>

是否有其他方法可以刷新addthis小部件。

Answer 1

页面刷新时，它不会调用onDestroy()。因此，您的说明永远不会被删除，this.httpRequestService.requestCompleted.subscribe()不会第二次被调用，但处理onInit()，这就是this.subscribeFormProcessing保持true的原因。

您必须在重新加载期间找到取消订阅（）this.subscribeEmailSubscriber的方法。做这样的事情：

ngOnInit(): void {
   // check whether there is already an active subscription
   // if so, drop it.
   if (this.subscribeEmailSubscriber) {
       this.subscribeEmailSubscriber.unsubscribe();
   }

   // the rest of the code stays as is
   this.subscribeEmailAddress = '';
   this.subscribeMsg = '';
   this.btnLoaderUrl = this.appSettingsService.getImagesBaseUrl() + 'app/btn-loader.gif';
   this.subscribeEmailSubscriber = this.httpRequestService.requestCompleted.subscribe(data => {
        this.subscribeFormProcessing = false;
        if (data['status'] === "success") {
            this.subscribeMsg = data['message'];
        } else {
            this.subscribeMsg = data['message'];
        }
        this.clearSubscribeMessage()
   });
}

Angular变量绑定无法在页面/浏览器上重新加载，但在浏览路径

1 个答案: