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

Question

我是 Angular 的新手，我有一个滑块组件，但我将在 2 个页面（主页、新闻）中使用它，我正在使用 ViewChild 从 [=25= 调用它]（主页）并想为每张幻灯片添加新图像和标题，两个页面（主页，新闻）具有相同的滑块组件但标题和图像不同，我只能在主页中显示滑块但它不会更新数据我需要的那个，我正在使用 slick carousel，有什么帮助吗？

首页（parent）：

@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
    };
}

在主页和 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" }
    ];
}

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

Update slider component data from any other component

angular

components

angular8

viewchild