Angular Can'；无法绑定到属性，因为它是'；t'的已知属性；组件'；棱角分明

我正在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. ("

应用模块

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>
      <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>

Manager-{{ManagerStrategyDetails.ManagerName}
X

应将@Input注释直接放置在_moduleSize的setter上：

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

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

<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>

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