Привязка угловой переменной не работает при перезагрузке страницы / браузера, но работает при навигации по маршрутам

Question

У меня есть кнопка подписки, на которой написано Subscribe текст.Проблема в том, что при перезагрузке страницы значение Subscribe не отображается.Значение кнопки контролируется машинописным кодом.Странная вещь, когда я перехожу к любому маршруту, текст волшебно появляется.

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.

Вы должны найти способunsubscribe () 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()
   });
}