Question

我在Angualar中有一个“应用”组件：

import { Component } from '@angular/core';
interface IImages {
  id: number; title: string; url: string;
}
..............
export class AppComponent {
  images: IImages[]  = [
    {
      id: 1,
      title: 'accusamus beatae ad facilis cum similique qui sunt',
      url: 'https://placekitten.com/200/198',
    }, ...

和我的HTML

<div class="container">
  <div class="col m3">
    <mat-card class="example-card" *ngFor="let image of images">
      <mat-card-header>
        <mat-card-title>{{image.title}}</mat-card-title>
      </mat-card-header>
      <img mat-card-image [src]="image.url">
    </mat-card>
  </div>

现在，如何将这个组件分为画廊和画廊项目两个部分？

Answer 1

尝试一下：https://stackblitz.com/edit/angular-tzfal4

图库：

import { Component, Input } from '@angular/core';
import {Image} from './image'

@Component({
  selector: 'app-gallery-container',
  template: '<div class="container">\
      <div class="col m3">\
        <app-gallery-item *ngFor="let image of images" [image]="image">\
        </app-gallery-item>\
      </div>\
    </div>'  
})
export class GalleryContainerComponent  {
  @Input()
  images: Image[];
}

图库项目：

import { Component, Input } from '@angular/core';
import {Image} from './image'

@Component({
  selector: 'app-gallery-item',
  template: '<mat-card class="example-card">\
      <mat-card-header>\
        <mat-card-title>{{image.title}}</mat-card-title>\
      </mat-card-header>\
      <img mat-card-image [src]="image.url">\
    </mat-card>'  
})
export class GalleryItemComponent  {
  @Input()
  image: Image;
}

如何将组成图像分为图像的组成部分和正确的图像？

1 个答案: