Question

我有一个现有的按钮组件A，我想在another（第三方）组件B中使用。组件B期望A为passed by type所以我将其添加到entryComponents我的模块列表。到目前为止一切都很好。

组件B期望A有2个名为value和rowData的输入。我希望此value显示为someLabel，并且对组件B中组件A的所有实例使用相同的someIcon感到满意。

组件B exposes 2个回调：

onComponentInitFunction: (instance: any) => { ... }被称为1st并返回组件A的实例，可用于为组件A的输出设置侦听器。
valuePrepareFunction: (cell: string|number, row: any) => { ... }被称为第二名，可用于根据输入value数据计算所需的回报row。

问题我可以按原样重复使用组件A，可能利用组件B回调将value映射到someLabel和硬编码someIcon - 或者执行我需要创建一个新组件A＆＃39;使用正确的@Input？

组件A代码如下所示：

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

@Component({
  selector: 'some-button',
  templateUrl: './some-button.component.html'
})
export class SomeButtonComponent implements OnInit {
  @Input() someIcon: string;
  @Input() someLabel: string;

  @Output() click: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() { }
}

其模板如下：

<button class="some-button">
  <span class="{{someIcon}}"></span>
  <span>{{someLabel}}</span>
</button>

Angular entryComponents输入到指令绑定

0 个答案: