ngx-twitter-timeline Твиты не отображаются, когда я нажимаю кнопку второй раз в angular6? - PullRequest
Новая
       23

ngx-twitter-timeline Твиты не отображаются, когда я нажимаю кнопку второй раз в angular6?

0 голосов
/ 15 сентября 2018 
I have created simple project that just displaying recent 10 tweets from Twitter.  

1) Home.component (parent component)  
2) Social-media.component (child component)  
3) Tweets.component (child component)

Home.component.ts 

<app-social-media></app-social-media>

в social-media.component.html 

<button mat-fab  [matMenuTriggerFor]="cartMenu" #cartMenuTrigger="matMenuTrigger" class="tw flex-row-button" (click)="toggleChild(); scrollTo()">
            <i class="fa fa-twitter  fa-2x"></i>
        </button>
        <!-- <a  at-fab type="button" scrollTo href="#main-section"[matMenuTriggerFor]="cartMenu" #cartMenuTrigger="matMenuTrigger" class="tw flex-row-button" (click)="toggleChild()">
                <i class="fa fa-twitter  fa-2x"></i>
            </a> -->
        <button mat-fab class="in" (click)="openDialogin()">
            <i class="fa fa-instagram  fa-2x"></i>
        </button>
        <button mat-fab class="fb" (click)="openDialogfb()">
            <i class="fa fa-ban fa-facebook  fa-2x"></i>
        </button>
        <mat-toolbar class="olc-menu" fxLayoutAlign="center center">
            <div fxLayoutAlign="center center">
                <mat-menu #cartMenu="matMenu" [overlapTrigger]="false" xPosition="before" class="top-menu-dropdown cart-dropdown">
                    <div fxLayout="row wrap">
                        <div fxFlex="100" class="p-1">
                            <app-tweets [showMePartially]="!showVar"></app-tweets>
                        </div>
                    </div>
                </mat-menu>
            </div>
        </mat-toolbar>

в этом компоненте я упомянул кнопку, когда я нажимаю кнопку в первый раз, я могу отобразить все 10 твитов. во второй раз не могу получить эти твиты, если я нажму в третий раз, я могу отобразить все десять твитов.

socialmedia.component.ts 

import { Component, OnInit } from '@angular/core';                
                @Component({
                  selector: 'app-socialmedia',
                  templateUrl: './socialmedia.component.html',
                  styleUrls: ['./socialmedia.component.scss']
                })
                export class SocialmediaComponent implements OnInit {
                  showVar = true;
                  toggleChild() {
                    this.showVar = !this.showVar;
                    console.log(this.showVar);
                  }
                  constructor() { }

                  public scrollTo() {
                    setTimeout(() => {
                      window.scrollTo(0, 450);
                    });                
                  }               
                  ngOnInit() {
                  }
                }

Tweets.component.html 

<div *ngIf="showMePartially" class="swiper-container" [swiper]="config">
                        <div class="swiper-wrapper h-100">      
                                <ngx-twitter-timeline class="swiper-lazy" [data]="{sourceType: 'url', url: 'https://twitter.com/RajuOakLiquor' }" [opts]="{tweetLimit: 10}">          
                                </ngx-twitter-timeline>
                                <div class="swiper-lazy-preloader"></div>
                        </div>

                    </div>

в Tweets.component.ts 

import { Component, OnInit, Input  } from '@angular/core';
                import { NgxSpinnerService } from 'ngx-spinner';
                @Component({
                  selector: 'app-tweets',
                  templateUrl: './tweets.component.html',
                  styleUrls: ['./tweets.component.scss']
                })
                export class TweetsComponent implements OnInit {
                  @Input() showMePartially: boolean;
                  constructor(private spinner: NgxSpinnerService) { }

                  ngOnInit() {
                    this.spinner.show();
                    setTimeout(() => {
                        /** spinner ends after 5 seconds */
                        this.spinner.hide();
                    }, 5000);

                  } 
                }

Здесь я упомянул выходное изображение.
1) Выходное изображение 2) после повторного нажатия

...