使用 Typescript 在 Angular 4 中添加芯片组件

Question

我正在尝试向我的 Angular Web 应用程序添加一个芯片组件。它是用 Typescript、HTML 和 CSS 文件编写的。

我已经苦苦挣扎了几个星期，试图让它正确，但没有找到正确的解决方案。

这是一个带有我当前代码的 Plunkr： https://plnkr.co/edit/zvEP9BOktwk6nBojsZQT?p=catalogue

更新：我已经编辑了我的代码以反映我正在读取一个字符串数组的输入，称为选定的。我正在输出一个名为 code 的字符串数组。

下面是我正在使用的代码：

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

我已经清理了你的 plunker，现在我可以在芯片组件中一路到达 ngOnInit() 而没有任何错误。如果您在设置逻辑方面需要帮助，请从这里获取并告诉我们。但在此之前，我想请您参考有关 @Input() 和 @Ouput() 装饰器的文档。

plunker