Angular 2
Beispiele für erweiterte Komponenten

Bemerkungen

Bildauswahl mit Vorschau

In diesem Beispiel erstellen wir eine Bildauswahl, die Ihr Bild vor dem Hochladen in der Vorschau anzeigt. Der Previewer unterstützt auch das Ziehen und Ablegen von Dateien in die Eingabe. In diesem Beispiel werde ich nur das Hochladen einzelner Dateien behandeln, aber Sie können ein wenig basteln, um das Hochladen mehrerer Dateien zu ermöglichen.

image-preview.html

Dies ist das HTML-Layout unserer Bildvorschau

<!-- Icon as placeholder when no file picked -->
<i class="material-icons">cloud_upload</i>

<!-- file input, accepts images only. Detect when file has been picked/changed with Angular's native (change) event listener -->
<input type="file" accept="image/*" (change)="updateSource($event)">

<!-- img placeholder when a file has been picked. shows only when 'source' is not empty -->
<img *ngIf="source" [src]="source" src="">

image-preview.ts

Dies ist die Hauptdatei für unsere Komponente <image-preview>

import {
    Component,
    Output,
    EventEmitter,
} from '@angular/core';

@Component({
    selector: 'image-preview',
    styleUrls: [ './image-preview.css' ],
    templateUrl: './image-preview.html'
})
export class MtImagePreviewComponent {

    // Emit an event when a file has been picked. Here we return the file itself
    @Output() onChange: EventEmitter<File> = new EventEmitter<File>();

    constructor() {}

    // If the input has changed(file picked) we project the file into the img previewer
    updateSource($event: Event) {
        // We access he file with $event.target['files'][0]
        this.projectImage($event.target['files'][0]);
    }

    // Uses FileReader to read the file from the input
    source:string = '';
    projectImage(file: File) {
        let reader = new FileReader;
        // TODO: Define type of 'e'
        reader.onload = (e: any) => {
            // Simply set e.target.result as our <img> src in the layout
            this.source = e.target.result;
            this.onChange.emit(file);
        };
        // This will process our file and get it's attributes/data
        reader.readAsDataURL(file);
    }
}

eine andere.komponente.html

<form (ngSubmit)="submitPhoto()">
    <image-preview (onChange)="getFile($event)"></image-preview>
    <button type="submit">Upload</button>
</form>

Und das ist es. Viel einfacher als in AngularJS 1.x. Ich habe diese Komponente auf der Grundlage einer älteren Version erstellt, die ich in AngularJS 1.5.5 erstellt habe.

Tabellenwerte über die Eingabe herausfiltern

Importieren Sie ReactiveFormsModule und dann

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'component',
  template: `
    <input [formControl]="control" />
    <div *ngFor="let item of content">
      {{item.id}} - {{item.name}}
    </div>
  `
})
export class MyComponent implements OnInit, OnDestroy {

  public control = new FormControl('');

  public content: { id: number; name: string; }[];
  
  private originalContent = [
    { id: 1, name: 'abc' },
    { id: 2, name: 'abce' },
    { id: 3, name: 'ced' }
  ];
  
  private subscription: Subscription;
  
  public ngOnInit() {
    this.subscription = this.control.valueChanges.subscribe(value => {
      this.content = this.originalContent.filter(item => item.name.startsWith(value));
    });
  }
  
  public ngOnDestroy() {
    this.subscription.unsubscribe();
  }
  
}