Wie Winkel 4 Komponente

Question

wiederverwenden Ich verwende in meinem Projekt einige Komponenten von primeNG (https://www.primefaces.org/primeng). Diese Komponenten haben ihre eigenen Eigenschaften und Ereignisse.

Ich kann diese Komponenten irgendwann anpassen, also erstelle ich meine eigenen Komponenten, die diese Komponenten importieren, aber beim Zugriff auf meine Komponenten kann ich die Eigenschaften und Ereignisse der primeng-Komponenten nicht verwenden.

Nutze ich die Komponenten richtig wieder? Wie ist der richtige Weg, wiederverwendbare Komponenten in einem Angular 4-Projekt zu verwenden?

Zum besseren Verständnis:

Ich habe eine Komponente namens 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() { 
 
    } 
 

 
}

Und ich kann auf diese Weise wiederverwenden:

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

Aber ich kann nicht die primeng Eigenschaften wie Behinderte auf diese Weise

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

Wie ist die Verwendung richtiger Weg, um alle Prop Erties von Primeng?

App Modul:

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

Ändern Sie diese

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

mit diesem

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

Prüfung ist inpu t Eigenschaft, Sie können nicht setzen [(überprüfen)] es ist falsch, Sie definieren mit der Ausgabeeigenschaft die Daten, die Sie einer übergeordneten Komponente übergeben möchten.

eine Eingabeeigenschaft auf die Komponente

@Input() disabled; 

und fügen Sie das Kontrollkästchen primeng Komponente deaktiviert Fügen Sie die Eigenschaft

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

In den App deaktiviert.

Modul

import {CheckboxModule} from 'primeng/primeng'; 

und der Importe

imports: [..., CheckboxModule]