如何重用angular 4组件

Question

我在我的项目中使用了primeNG (https://www.primefaces.org/primeng)的一些组件。这些组件有自己的属性和事件。

我有时可能会定制这些组件，所以我创建了自己的组件来导入这些组件，但是当访问我的组件时，我不能使用primeng组件的属性和事件。

我是否正确地重用了这些组件？在Angular 4项目中拥有可重用组件的正确方法是什么？

为了更好地理解：

我有一个名为checkbox的组件

.HTML

<div>
    <p-checkbox [ngModel]="check" (ngModelChange)="onChange($event)"  binary="true"></p-checkbox>
</div>

.TS

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


@Component({
  selector: 'app-input-checkbox',
  templateUrl: './checkbox.component.html',

})

export class CheckBoxComponent implements OnInit {

  @Input()  check: boolean;
  @Output() checkChange: EventEmitter<boolean> = new EventEmitter();

  onChange($event) {
      this.check = $event;
      this.checkChange.emit($event);
  }

  ngOnInit() {
  }

}

我可以这样重用：

<app-input-checkbox [(check)]="input.read">  </app-input-checkbox>

但我不能以这种方式使用primeng属性

<app-input-checkbox [(check)]="input.read" [disabled]="true">  </app-input-checkbox>

如何正确使用primeng中的所有属性？

应用程序模块：

import { AppRoutingModule } from './app.routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
// import {NgbModule} from '@ng-bootstrap/ng-bootstrap'
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


import {
  InputTextModule, CheckboxModule, DropdownModule,
  ToolbarModule, SpinnerModule,
  ButtonModule,
  AccordionModule,
  DialogModule,
  InputTextareaModule} from 'primeng/primeng';
import { AppComponent } from './app.component';

// Shared Folder
import { NavBarComponent } from './shared/nav-bar/nav-bar.component';
import { HeaderComponent } from './shared/header/header.component';
import { CheckBoxComponent } from './shared/input/checkbox/checkbox.component';
import { InputTextComponent } from './shared/input/text/text.component';


import { UserPermissionsComponent } from './components/user-permissions/user-permissions.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    HeaderComponent,
    InputTextComponent,
    CheckBoxComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    InputTextModule,
    CheckboxModule,
    DropdownModule,
    ToolbarModule,
    ButtonModule,
    AccordionModule,
    SpinnerModule,
    InputTextareaModule,
    HttpModule,
    DialogModule,
    RouterModule.forRoot([
      {
        path: 'administration',
        component: AccordionAdministrationComponent
      },
      {
        path: 'permission',
        component: AccordionPermissionComponent
      }
    ]),
    FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
    // NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

改变这一点

 <app-input-checkbox [(check)]="input.read" [disabled]="true">  </app-input-checkbox>

有了这个

<app-input-checkbox [check]="input.read" (checkChange)="methodInParentComponent($event)" [disabled]="true">  </app-input-checkbox>

check是输入属性，你不能put (check)它是错误的，你用output属性定义了你想要传递给父组件的数据。

将输入属性disabled添加到组件

@Input() disabled;

并将属性disabled添加到复选框primeng组件中

<p-checkbox [(ngModel)]="value" binary="true" [disabled]="disabled"> </p-checkbox>

添加到app.module

import {CheckboxModule} from 'primeng/primeng';

和在导入中

imports: [..., CheckboxModule]