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是输入属性，你不能把[（check）]错误，你用output属性定义你要传递父组件的数据。

向组件添加禁用输入属性

@Input() disabled;

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

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

添加到app.module

import {CheckboxModule} from 'primeng/primeng';

和进口

imports: [..., CheckboxModule]

如何重用角度4组件

1 个答案: