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

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

1 个答案: