从任何其他组件更新滑块组件数据

Question

我是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>

我希望在任何页面上都使用此光滑组件，并根据您所在的页面来更新幻灯片内容。

Answer 1

使用rxjs Subject实现。您可以使用BehaviorSubject来检测应用程序中任何位置的更改并进行相应的更新。

您可以选中此Medium Article以了解最简单的用例。

Answer 2

不是使用@ViewChild，而是为什么不提供值作为输入：

export class SliderComponent {

    @Input() slides;

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

然后在您的主页和新闻中，您可以像这样使用它：

<app-slider [slides]="slides"></app-slider>

并且在主页和news.component.ts文件中仅定义幻灯片

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