각도 4의 칩 구성 요소를 대변자로 추가

Question

각도 응용 프로그램에 칩 구성 요소를 추가하려고합니다. Typescript, HTML 및 CSS 파일로 작성되었습니다.

저는 몇 주 동안 올바르게하기 위해 애 쓰고 있으며 적절한 해결책을 찾지 못했습니다. https://plnkr.co/edit/zvEP9BOktwk6nBojsZQT?p=catalogue

UPDATE :

여기에 내 현재 코드와 Plunkr입니다 내가 선택이라는 문자열 배열이있는 입력을 읽고있다 반영하도록 내 코드를 편집했습니다. 코드라는 문자열 배열을 출력하고 있습니다. 나는 문제가 내 부모 템플릿에서 자녀의 구성 요소를 호출 할 수 아니에요이라고 생각

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() { 
    } 


} 

: 아래

내가 함께 일하고 코드입니다.

누군가 칩을 추가하기 위해 칩 구성 요소를 가져 오는 데 도움이되는 조언이 있습니까?

감사합니다.

Answer 1

플 런커를 정리 했으므로 이제 오류없이 칩 구성 요소에 ngOnInit()까지 줄 수 있습니다. 여기에서 가져 와서 논리 설정에 도움이 필요하면 알려주십시오. 하지만 그 전에는 @Input() 및 @Ouput() 데코레이터에 관한 문서를 참조하도록 요청하고 싶습니다. selectedCodeOutput이 @Output() 인 경우

plunker