如何重用 angular 4 个组件
How to reuse angular 4 component
我在我的项目中使用了一些来自 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 { }
改变这个
<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是input属性,你不能放[(check)]是错误的,你用output属性定义要传给父组件的数据。
向组件添加输入 属性 已禁用
@Input() disabled;
并向复选框 primeng 组件添加 属性 禁用
<p-checkbox [(ngModel)]="value" binary="true" [disabled]="disabled"> </p-checkbox>
添加到 app.module
import {CheckboxModule} from 'primeng/primeng';
和进口
imports: [..., CheckboxModule]
我在我的项目中使用了一些来自 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 { }
改变这个
<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是input属性,你不能放[(check)]是错误的,你用output属性定义要传给父组件的数据。
向组件添加输入 属性 已禁用
@Input() disabled;
并向复选框 primeng 组件添加 属性 禁用
<p-checkbox [(ngModel)]="value" binary="true" [disabled]="disabled"> </p-checkbox>
添加到 app.module
import {CheckboxModule} from 'primeng/primeng';
和进口
imports: [..., CheckboxModule]