如何重用角度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>

但是我不能像這樣禁用primem屬性

<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）]是錯誤的，使用output屬性定義要傳遞父組件的數據。

向組件添加禁用的輸入屬性

@Input() disabled;

並將禁用的屬性添加到復選框primeng組件

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

添加到app.module

import {CheckboxModule} from 'primeng/primeng';

和進口

imports: [..., CheckboxModule]