Question

我升级了我的package.json文件，它打破了我的模态。但是我在breaking changes上找不到任何文档。我尝试了几件事，但没有用。

import { Component, ViewChild } from '@angular/core';
import {ModalComponent} from "ng2-bs3-modal/ng2-bs3-modal"
@Component({
    selector: 'new-office',
    templateUrl: 'new-office.component.html',
    styleUrls: ['new-office.component.css']
})
export class ModalMessageComponent {
     @ViewChild('myModal')
    modal: ModalComponent;

}

模态：

<button type="button" class="btn-primary pull-right" (click)="myModal.open()"><strong>+</strong></button>
<modal backdrop="true" keyboard="false" size="sm" class="modalSize" #myModal>
    <modal-body>
        <h1>
            New Office Code
        </h1>
        <div>
            <label for="officeInput" id="officeInputLabel" class="col-sm-2.col-form-label">Office Code:</label>
            <input type="text" id="officeInput">
        </div>
        <div>
            <label for="officeSelect" id="officeSelectLabel" class="col-sm-2.col-form-label">Office Code:</label>
            <select id="officeSelect">
                <option value="drew">test</option>
                <option value="drew">test1</option>
                <option value="drew">test3</option>
            </select>
        </div>
        <div>
            <label for="commandInput" id="commandInputLabel" class="col-sm-2.col-form-label">Command Name:</label>
            <input type="text" id="commandInput">
        </div>
        <div id="buttonGroup">
            <button class="btn btn-md btn-primary" (click)="myModal.close()" id="markRead"> Create </button>
            <button class="btn btn-md btn-primary" (click)="myModal.close()" id="markRead"> Cancel </button>
        </div>

    </modal-body>
</modal>

是的，它在模块中声明。错误消息显示为：

1. If 'modal-body' is an Angular component, then verify that it is part of this module.
2. If 'modal-body' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (">+</strong></button>
<modal backdrop="true" keyboard="false" size="sm" class="modalSize" #myModal>
    [ERROR ->]<modal-body>
        <h1>
            New Office Code
"): ng:///MaintainOfficesModule/ModalMessageComponent.html@2:1
'modal' is not a known element:

的package.json：

"dependencies": {
    "@angular-redux/store": "6.5.7",
    "@angular/animations": "4.3.5",
    "@angular/common": "4.3.5",
    "@angular/compiler": "4.3.5",
    "@angular/core": "4.3.5",
    "@angular/forms": "4.3.5",
    "@angular/http": "4.3.5",
    "@angular/platform-browser": "4.3.5",
    "@angular/platform-browser-dynamic": "4.3.5",
    "@angular/router": "4.3.5",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "angular-tree-component": "^4.1.0",
    "bootstrap": "3.3.7",
    "bootstrap-colorpicker": "2.5.1",
    "bootstrap-markdown": "2.10.0",
    "bootstrap-progressbar": "0.9.0",
    "bootstrap-slider": "9.8.1",
    "bootstrap-tagsinput": "0.7.1",
    "bootstrap-timepicker": "0.5.2",
    "chart.js": "2.6.0",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "0.0.7",
    "clone": "2.1.1",
    "core-js": "2.5.0",
    "debounce": "1.0.2",
    "dropzone": "5.1.1",
    "dygraphs": "2.0.0",
    "fuelux": "3.16.1",
    "hammerjs": "^2.0.8",
    "he": "1.1.1",
    "highcharts": "5.0.14",
    "intl": "^1.2.5",
    "ion-rangeslider": "2.2.0",
    "jquery": "3.2.1",
    "jquery-color": "1.0.0",
    "jquery-jcrop": "0.9.13",
    "jquery-knob": "1.2.11",
    "jquery-ui-npm": "1.12.0",
    "jquery-validation": "1.17.0",
    "jquery.maskedinput": "1.4.1",
    "markdown": "0.5.0",
    "mdn-polyfills": "^5.0.0",
    "morris.js": "0.5.0",
    "ngx-bootstrap": "^1.6.6",
    "ngx-popover": "0.0.16",
    "nouislider": "10.1.0",
    "npm": "^5.3.0",
    "raphael": "2.2.7",
    "redux": "3.7.2",
    "rxjs": "5.4.3",
    "scriptjs": "2.5.8",
    "select2": "4.0.3",
    "smartadmin-plugins": "1.0.20",
    "to-markdown": "3.1.0",
    "ts-helpers": "1.1.2",
    "web-animations-js": "^2.2.5",
    "zone.js": "0.8.16"
},

如果有人遇到同样的问题，请分享。这篇文章不允许我发帖，因为代码很多，但我认为有必要分享一些package.json文件。

Answer 1

您需要将BsModalModule添加到NgModule的导入

import { BsModalModule } from 'ng2-bs3-modal';

@NgModule({
    imports: [ BsModalModule ]
    ...
 })
export class MyAppModule { }

'modal-body'不是已知的元素角4

1 个答案: