如何重用 Angular 4 组件

Question

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

有时我可能会自定义这些组件，因此我正在创建自己的组件来导入这些组件，但是在访问我的组件时，我无法使用primeng组件的属性和事件。

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

为了更好地理解：

我有一个叫做复选框的组件

.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是输入属性，不能放[(check)]是错的，你用输出属性定义你要传递给父组件的数据。

向组件添加一个输入属性禁用

@Input() disabled;

并将属性禁用添加到复选框primeng组件

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

添加到 app.module

import {CheckboxModule} from 'primeng/primeng';

在进口中

imports: [..., CheckboxModule]