从任何其他组件更新滑块组件数据 [英] Update slider component data from any other component

问题描述

我是 Angular 的新手，我有一个滑块组件，但我将在 2 个页面(主页、新闻)中使用它，我使用 ViewChild 从父级(主页)调用它并想要添加新图像和每张幻灯片的标题，两个页面(主页、新闻)都有相同的滑块组件，但标题和图像不同，我只能在主页中显示滑块，但它不会用我需要的数据更新数据，我正在使用 slick旋转木马，有什么帮助吗?

主页(父):

@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"}];幻灯片配置 = {点":真实，箭头":假，"slidesToShow": 1,幻灯片滚动":1};

滑块 html:

<ngx-slick-carousel class="slider sliderHome" #slickModal="slick-carousel" [config]="slideConfig"><div ngxSlickItem *ngFor="让幻灯片幻灯片" class="slide" [ngStyle]="{background: 'url(' + slide.img + ')'}"><div class="容器"><h1>{{ slide.title }}</h1><p>{{ slide.description }}</p><a href="#" class="btn">了解详情</a>

</ngx-slick-carousel>

我希望在任何页面上使用这个漂亮的组件，并根据您所在的页面更新幻灯片内容.

解决方案

与其使用 @ViewChild，不如直接提供值作为输入:

导出类 SliderComponent {@Input() 滑动；幻灯片配置 = {点":真实，箭头":假，"slidesToShow": 1,幻灯片滚动":1};}

在主页和 news.component.ts 文件中只需定义幻灯片并通过您的 @Input() 传递它

@Component({选择器:'主页或新闻页面'，模板:`<app-slider [slides]="slides"></app-slider>`})导出类 HomePageOrNewsComponent {公共幻灯片 = [{ img: "image.jpg", title: "title", description: "description" },{ img: "image.jpg", title: "title", description: "description" }];}

I'm new on Angular, I have a slider component, but I'll use this in 2 pages (homepage, news), I'm using ViewChild to call it from parent (homepage) and want to add new images and title to each slide, both pages (homepage, news) have same slider component but different titles and images, I only could display the slider in homepage but it doesn't update the data with the one I need, I'm using slick carousel, any help?

homepage (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"}
    ];
  }

slider component:

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

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

slider 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 expect to use this slick component on any page and update the slides content depending the page you are.

解决方案

Instead of using @ViewChild, why not instead just provide the values as an input:

export class SliderComponent {

    @Input() slides;

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

And in the homepage and news.component.ts files just define slides and pass it via your @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" }
    ];
}

这篇关于从任何其他组件更新滑块组件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！