Question

例如

我在名为图库的共享组件上制作了所有图像都显示在json中。现在我在主页和图库页面中使用此共享组件。在主页中我想显示前8个图像，在图库页面中我想显示所有图像。

共享组件

@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html'
})
export class GalleryComponent implements OnInit {
 //getting images data from my service

}

Html是共享组件

<div class="col-md-3 col-sm-6" *ngFor="let image of gallery">
  <div class="gallery-img">
    <a href="">
      <img src="{{gallery.images[0]}}">
    </a>
  </div>
</div>

主页组件html

<app-gallery></app-gallery> //Here i want show 8 images only

图库组件页

<app-gallery></app-gallery> // Here i want to show all images from gallery

Answer 1

也许您可以在家中使用您的组件选择器。画廊页面，这两个都将具有共享组件的不同实例。

并且为了检测此共享组件所属的组件，您可以将字符串值作为输入值传递，如下所示。

<shared_component [hostComponent]="homePage"></shared_component>
<shared_component [hostComponent]="imageGallery"></shared_component>

现在，在共享组件内部，您可以确定hostComponent是否为＆＃34; HomePage＆＃34;然后应用管道将图像限制为8，否则不要使用管道。

Answer 2

您可以使用切片管道

<shared-component [images]="images | slice:0:8"></app-gallery>

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

Answer 3

您可以在app-gallery组件中创建Input属性：

        var daysAgo7 = DateTime.Now.AddDays(-7);
        string queryString = $"*[System/TimeCreated/@SystemTime >= '{daysAgo7.ToString("yyyy-MM-dd")}T00:00:00.000000000K']";

传递来自父组件的任何图像数组：

@Input() images: any[];

或使用切片管仅传递前4个图像：

<app-gallery [images]="images"></app-gallery>

这是基本的plunker，可能有助于了解如何执行此操作。

如何在角度2中显示两个不同组件中的有限数据

3 个答案: