Question

我正在Angular 7中构建一个共享组件。共享组件是模式窗口。当我在特定模块中使用共享组件时，它工作正常，但如果将共享组件添加到共享模块中，则会给我一个错误。如您在代码中看到的，我创建了一个共享模块，该模块导出共享组件。我已将其添加到AppModule的声明中。然后，将其导入到另一个模块中，在该模块中，需要使用模式窗口作为其组件之一。

我想念什么？

错误

Can't bind to 'modalSize' since it isn't a known property of 'shared-modal'.
1. If 'shared-modal' is an Angular component and it has 'modalSize' input, then verify that it is part of this module.
2. If 'shared-modal' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { StrategyService } from './services/strategy.service';
import { ManagerService } from './services/manager.service';
import { InteractionService } from './services/interaction.service';
import { DocumentService } from './services/document.service';
import { CommonDataService } from './services/common.data.service';
import { Comparator } from './utilities/comparator';
import { Formatter } from './utilities/formatter';
import { FileUpload } from './utilities/fileUpload';
import { WindowRef } from './utilities/window.ref';
import { NotifyService } from './utilities/notify.service';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
import { CKEditorModule } from '../custom/ng2-ckeditor';
import { BsModalModule } from 'ng2-bs3-modal';
import { AngularFileUploaderModule } from 'angular-file-uploader';
import { AppConfig } from './app.config';
import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app.routing';
import { SharedModule} from './shared/shared.module';
import { ManagerStrategyModule } from './manager-strategy/managerStrategy.module';
import { HomeModule } from './home/home.module';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        DateInputsModule,
        DropDownsModule,
        CKEditorModule,
        BrowserAnimationsModule,
        BsModalModule,
        LayoutModule,
        AngularFileUploaderModule,
        InputsModule,
        TreeViewModule,
        AppRoutingModule,
        SharedModule,
        ManagerStrategyModule,
        HomeModule,
        AngularFontAwesomeModule
    ],
     exports: [
     ],

    providers: [
        StrategyService,
        ManagerService,
        InteractionService,
        DocumentService,
        CommonDataService,
        NotifyService,
        AppConfig,
        Comparator,
        Formatter,
        WindowRef,
        FileUpload
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SharedModal } from '../shared/shared-modal';


@NgModule ({
    imports: [CommonModule
            , FormsModule],
    declarations: [SharedModal],
    exports: [SharedModal],
    providers: []
})
export class SharedModule {}

共享模态ts

import { Component, Input, OnChanges, OnInit, SimpleChange, SimpleChanges, DoCheck } from '@angular/core';
declare var $: any;
@Component({
    selector: 'shared-modal',
    templateUrl: './shared-modal.html'
})
export class SharedModal {
    _isopen = false;
    @Input()
    private _modalSize = 1; // 1:normal, 2: medium, 3: large
    public get modalSize() {
        return this._modalSize;
    }
    public set modalSize(value) {
        this._modalSize = value;
    }

    get open(): boolean {
        return this._isopen;
    }

    @Input()
    set open(val: boolean) {
        this._isopen = val;
    }
    getModalDialogClass() {
        if (this.modalSize == null || this.modalSize <= 1 || this.modalSize > 3) {
            return 'modal-dialog';
        } else if (this.modalSize <= 2) {
            return 'modal-dialog modal-md';
        } else if (this.modalSize <= 3) {
            return 'modal-dialog modal-lg';
        }
    }
}

共享模式HTML

<div id="modal_container">
        <div id="shared_modal" class="modal fade show" data-backdrop="static" data-keyboard="false" role="dialog" [ngStyle]="{'display': _isopen ? 'block' : 'none','z-index':'1050' }">
            <div [ngClass] = "getModalDialogClass()">
                <div class="modal-content">
                    <div class="modal-header">
                        <ng-content select=[header]></ng-content>
                    </div>
                    <div class="modal-body">
                        <ng-content select=[body]></ng-content>
                    </div>
                    <div class="modal-footer">
                        <ng-content select=[footer]></ng-content>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show" *ngIf="_isopen" style="display: block; z-index: 1040;"></div>
        <div class="modal-backdrop fade show" *ngIf="!_isopen" style="display: none; z-index: 1040;"></div>
    </div>

其他模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular/main';
import { CKEditorModule } from '../../custom/ng2-ckeditor';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { TabStripModule } from '@progress/kendo-angular-layout';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { SharedModule} from '../shared/shared.module';
import { ManagerStrategyComponent } from './managerStrategy.component';
import { ManagerStrategyDetailsComponent } from './strategyDetails.component';
import { FirmComponent } from '../firm/firm.component';
import { FundComponent } from '../fund/fund.component';
import { ManagerComponent } from '../manager/manager.component';
import { AllocationsComponent } from '../allocations/allocations.component';
import { PeerGroupComponent } from '../peer-group/peergroup.component';
import { ClassificationOverridesComponent } from '../classification-overrides/classificationoverrides.component';
import { FundStatisticsComponent } from './fundStatistics.component';
import { FundTermsComponent } from '../fund-terms/fundterms.component';
import { ManagerStrategyPerformaceComponent } from './strategyPerformance.component'
import { TabContentLoadOnDemandDirective } from './lazyload.directive';
import { BsModalModule } from 'ng2-bs3-modal';
//import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// import {NgbdModalComponent, NgbdModalContent} from '../shared/modal-component';


@NgModule({
    declarations: [
        ManagerStrategyComponent,
        ManagerStrategyDetailsComponent,
        FundStatisticsComponent,
        ManagerStrategyPerformaceComponent,
        TabContentLoadOnDemandDirective,
        FirmComponent,
        FundComponent,
        ManagerComponent,
        AllocationsComponent,
        PeerGroupComponent,
        ClassificationOverridesComponent,
        FundTermsComponent
        // NgbdModalComponent,
        // NgbdModalContent
    ],
    // entryComponents: [NgbdModalContent],
    imports: [
        FormsModule,
        BrowserModule,
        DateInputsModule,
        AgGridModule,
        CKEditorModule,
        TabStripModule,
        BsModalModule,
        DropDownsModule,
        SharedModule
        // NgbModule.forRoot()
    ],
    exports: [
        ManagerStrategyComponent,
        ManagerStrategyDetailsComponent,
        FundStatisticsComponent,
        ManagerStrategyPerformaceComponent,
        FirmComponent,
        FundComponent,
        ManagerComponent,
        AllocationsComponent,
        PeerGroupComponent,
        ClassificationOverridesComponent,
        DropDownsModule

    ]
})

export class ManagerStrategyModule { }

其他模块的组件html

<div>
      <shared-modal [modalSize]="3" class="survey-edit" [open]="managerWindowOpened">
            <div style="width: 100%;" header>
                <h4 class="modal-title">Manager - {{ManagerStrategyDetails.ManagerName}}
                    <div style="text-align: right"><button aria-label="Dismiss" class="close" style="margin-top: -20px"
                            type="button" (click)="dismissManagerModal()">X</button></div>
                </h4>
            </div>
            <div body>
                <mgr-manager [ManagerId]='ManagerId'></mgr-manager>

            </div>
            <div footer>
            </div>
        </shared-modal>
    </div>

Answer 1

@Input批注应直接放在_moduleSize的设置器上：

private _modalSize = 1; // 1:normal, 2: medium, 3: large
public get modalSize() {
    return this._modalSize;
}
@Input()
public set modalSize(value) {
    this._modalSize = value;
}

以前，注释仅将private参数声明为输入。但是，由于它是私有的，因此它是不可见的。将其放在公共设置器上，将使您可以在其他地方正确使用它。

无法绑定到属性，因为它不是Angular中“ component”的已知属性

1 个答案: