Обновить данные компонента слайдера из любого другого компонента - PullRequest
Новая
       41

Обновить данные компонента слайдера из любого другого компонента

0 голосов
/ 08 ноября 2019

Я новичок в Angular, у меня есть компонент слайдера, но я буду использовать его на 2 страницах (домашняя страница, новости), я использую ViewChild, чтобы вызвать его из родительского (домашняя страница) и хочу добавить новые изображенияи заголовок для каждого слайда, обе страницы (домашняя страница, новости) имеют один и тот же компонент слайдера, но разные заголовки и изображения. Я мог бы отображать только слайдер на домашней странице, но он не обновляет данные тем, который мне нужен, я использую пятноКарусель, любая помощь?

домашняя страница (родитель): 

@ViewChild(SliderComponent, {static:false}) slickModal: SliderComponent;

  ngAfterViewInit(){    

    this.slickModal.slides = [
      {img: "img-slide-01.jpg", title: "Title 1", description: "Description 1"},
      {img: "img-slide-02.jpg", title: "Title 2", description: "Description 2"}
    ];
  }

компонент слайдера: 

slides = [
    {img: "image.jpg", title: "title", description: "description"},
    {img: "image.jpg", title: "title", description: "description"}
  ];

  slideConfig = {
    "dots": true,
    "arrows": false,
    "slidesToShow": 1, 
    "slidesToScroll": 1
  };

слайдер html: 

<ngx-slick-carousel class="slider sliderHome" #slickModal="slick-carousel" [config]="slideConfig">
    <div ngxSlickItem *ngFor="let slide of slides" class="slide" [ngStyle]="{background: 'url(' + slide.img + ')'}">
        <div class="container">
            <h1>{{ slide.title }}</h1>
            <p>{{ slide.description }}</p>
            <a href="#" class="btn">Learn More</a>
        </div>
    </div>
</ngx-slick-carousel>

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

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Вместо использования @ViewChild, почему бы просто не предоставить значения в качестве входных данных: 

export class SliderComponent {

    @Input() slides;

    slideConfig = {
        "dots": true,
        "arrows": false,
        "slidesToShow": 1,
        "slidesToScroll": 1
    };
}

А в файлах homepage и news.component.ts просто определите слайды и передайте их через @Input() 

@Component({
    selector: 'home-or-news-page',
    template: `<app-slider [slides]="slides"></app-slider>`
})
export class HomePageOrNewsComponent {
    public slides = [
        { img: "image.jpg", title: "title", description: "description" },
        { img: "image.jpg", title: "title", description: "description" }
    ];
}
0 голосов
/ 08 ноября 2019

Используйте rxjs Тема для достижения этой цели. Вы можете использовать BehaviorSubject для обнаружения изменений в любом месте вашего приложения и соответственно обновлять его.

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

...