Question

我们在新的Angular 2应用程序中使用自定义组件，最近想要在父组件中提取一些部分，然后从子组件中扩展它们。但是@Input（）属性存在一些问题。

当我们在父组件中定义他们的输入时，应用程序按预期使用“ng serve”（在开发模式下）。但是当我们使用“ng build --prod”构建应用程序时，编译器会抱怨这些输入（标签是我们在此示例中的输入），就像它们不是子组件声明的一部分一样。它看起来像这样：

<jb-input class="col-md-6"
          name="name"
          [label]="'surname'"
          ngModel
          required>
</jb-input>

Child Component decleration：

export class JbInputComponent extends JbFormBasicComponent implements OnInit {

  ...

父组件声明：

@Injectable()
export default abstract class JbFormBasicComponent implements ControlValueAccessor {

  @Input() label: string;
  ...

当我们在子组件中定义输入时，它也有效。但是，如果没有在两个地方定义我们的投入，是否有更好的方法来实现这一目标？

这里我们在组件类级别中有父子关系。父级不需要拥有自己的选择器/模板。

更新：

我们还可以在子元素的组件变换中定义这些输入。所以：

@Component({
  moduleId: module.id,
  selector: '..',
  templateUrl: '..',
  inputs: ['label', ..]
})
export class JbInputComponent extends JbFormBasicComponent implements OnInit {
..

另一种选择是：将父也定义为组件：

@Component({
  moduleId: module.id,
  template: ''
})
export class JbFormBasicComponent implements ControlValueAccessor {
..

所以输入＆amp;输出字段对于子项是可见的，而不是在每个子项中再次定义它们。但是现在这个Component也必须在app.module中声明，因为它现在也是一个Component。这样父级不需要@Injectable注释。

但是我们仍然不知道应该采取哪种方式.Angular Documentation也就像一个玩笑。

Angular 2 - 在抽象（父）组件

0 个答案: