Comment réutiliser angulaire 4 composants

Question

J'utilise dans mon projet certains composants de primeNG (https://www.primefaces.org/primeng). Ces composants ont leurs propres propriétés et événements. Je peux personnaliser ces composants un jour, donc je crée mes propres composants qui importent ces composants, mais lorsque j'accède à mes composants, je ne peux pas utiliser les propriétés et les événements des composants primeng.

Est-ce que je réutilise correctement les composants? Comment est la bonne façon d'avoir des composants réutilisables dans un projet Angular 4?

Pour une meilleure compréhension:

J'ai un composant appelé case à cocher

.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() { 
 
    } 
 

 
}

Et je peux réutiliser cette façon:

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

Mais je ne peux pas utiliser les propriétés de primeng comme désactivé cette façon

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

Comment est le bonne façon d'utiliser tous les accessoires erties de primeng?

App Module:

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

Modifier cette

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

avec ce

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

chèque est inpu t, vous ne pouvez pas mettre [(cocher)] c'est faux, vous définissez avec la propriété output les données que vous voulez passer un composant parent.

Ajouter au composant une propriété d'entrée désactivé

@Input() disabled; 

et ajouter à la composante primeng case à cocher la propriété désactivée

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

Ajouter à l'application.Module

import {CheckboxModule} from 'primeng/primeng'; 

et des importations

imports: [..., CheckboxModule]