Eine Chipkomponente in Angular 4 mit Typoskript hinzufügen

Question

Ich versuche, eine Chipkomponente zu meiner Angular Webanwendung hinzuzufügen. Es ist in Typescript-, HTML- und CSS-Dateien geschrieben.

Ich habe seit ein paar Wochen gekämpft, um es richtig zu machen und habe nicht die richtige Lösung gefunden.

Hier ist ein Plunkr mit meinem aktuellen Code: https://plnkr.co/edit/zvEP9BOktwk6nBojsZQT?p=catalogue

UPDATE: ich meinen Code bearbeitet haben zu reflektieren, dass ich einen Eingang lese, die ein String-Array ist, ausgewählt genannt. Ich gebe ein String-Array namens code aus.

Unten ist der Code, mit denen ich arbeite:

import { 
    Component, Input, HostBinding, ElementRef, ViewChild, HostListener, EventEmitter, Output, OnInit, SimpleChanges, 
    OnChanges, QueryList, TemplateRef, ContentChildren, Directive 
} from '@angular/core'; 
import {ControlValueAccessor} from '@angular/forms'; 
import {Subject} from "@reactivex/rxjs/dist/es6/Subject"; 

@Component({ 
    selector: 'chips', 
    templateUrl: './chips.component.html', 
    styleUrls: ['./chips.component.scss'] 

}) 

export class ChipsComponent implements ControlValueAccessor, OnInit{ 

    @Output() code: string[]; 
    @Input() type = 'text'; 
    @Input() duplicates = false; 

    @Input() selected: any[]; 

    chips: ['chip1', 'chip2', 'chip3'] 

    chipItemList: any[]; 

    constructor() { 
    } 

    ngOnInit() { 
    console.log("selected in chips component ngOnInit(): " + this.selected); 
    console.log("code in chips component ngOnInit: " + this.code); 
    } 

    addChip($event){ 
    this.selected.push($event.target.value) 
    $event.target.value = ''; 
    } 



    /*addChip(addSelectedCode) { 
    //this.newChips.next(this.addCode); 
    console.log("addCode in chips component addChip(): " + this.addSelectedCode); 
    if (!this.chip || !this.duplicates && this.selected.indexOf(this.chip) !== -1) return; 
    this.selected.push(this.chip); 
    this.chip = null; 
    this.propagateChange(this.selected); 
    this.selectedCodeOutput = this.addSelectedCode; 
    console.log("selectedCodeOutput in chips component: " + this.selectedCodeOutput); 
    } */ 

    remove(index: number) { 
    //this.addSelectedCode.splice(index, 1); 
    this.propagateChange(this.selected); 
    this.selectedCodeOutput = this.addSelectedCode; 
    } 

    /* 
    Form Control Value Accessor 
    */ 
    writeValue(value: any) { 
    if (value !== undefined) this.selected = value; 
    } 

    propagateChange = (_: any) => { 
    }; 

    registerOnChange(fn: any) { 
    this.propagateChange = fn; 
    } 

    registerOnTouched() { 
    } 


} 

Ich glaube, das Problem ist, dass ich nicht in der Lage bin zu meiner Kind-Komponente aus meinen Eltern Vorlage zu nennen.

Hat jemand einen hilfreichen Ratschlag, um die Chipkomponente zum Hinzufügen von Chips zu bekommen?

Vielen Dank!

Answer 1

Ich habe Ihren Plünderer aufgeräumt und jetzt kann ich den ganzen Weg zu ngOnInit() in Chips Komponente ohne jeden Fehler bekommen. Nimm es von hier und lass es uns wissen, wenn du Hilfe beim Aufbau der Logik brauchst. Aber vor allem möchte ich Sie bitten, auf die Dokumente auf @Input() und @Ouput() Dekorateure zu verweisen.

plunker