无法绑定到“属性”，因为它不是“组件”的已知属性

Question

这是我的代码：

我有我的 app.module.ts

import { CustomAlertComponent } from './pages/common/custom- 
alert.component';
@NgModule({
  imports: [...],
  exports: [ ..., CustomAlertComponent],
  declarations: [.., CustomAlertComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

自定义警报.component.html

<ngb-alert *ngIf="!staticAlertClosed" [type]="type" (close)="true">{{message}}</ngb-alert>

自定义警报.component.ts

import { Component, OnInit, Input, EventEmitter } from '@angular/core';
 @Component({
  selector: 'custom-alert',
  templateUrl: './custom-alert.component.html'
})
export class CustomAlertComponent implements OnInit {

 @Input() message: string;
 @Input() type: string;
 @Input() staticAlertClosed:boolean;

 constructor() {}

 ngOnInit(){}
} 

和 start-workflow.component.ts

import { Component, OnInit, ViewEncapsulation, ViewContainerRef, Input, Output, EventEmitter  } from '@angular/core';
import { CustomAlertComponent } from '../common/custom-alert.component';
@Component({
  selector: 'start-workflow',
  templateUrl: 'start-workflow.component.html',
  styleUrls: ['../../../assets/scss/plugins/_datepicker.scss', 'start- 
  workflow.component.css']
})
export class StartWorkflowComponent implements OnInit{
  message: string;
  type: string;
  staticAlertClosed:boolean = false;

  constructor() {}
  public method(){
    this.message= 'Archivo enviado y guardado';
    this.type= 'success';
    this.staticAlertClosed = true;
 }
}

我遇到以下错误：

Blockquote core.js:1440 ERROR 错误：未捕获（承诺中）：错误：模板解析错误：无法绑定到“message”，因为它不是已知属性 1. 如果“custom-alert”是 Angular 组件并且它有“消息”输入，然后验证它是否是该模块的一部分。2. 如果“custom-alert”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。(" ][(message)]="text"> "): ng:///StartWorkflowModule/StartWorkflowComponent.html@1:16 'custom-alert' 不是已知元素：

请帮忙

Answer 1

您必须导入并添加NgbModule到您的app.module.ts文件中

import { CustomAlertComponent } from './pages/common/custom-alert.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [BrowserModule, NgbModule],
    exports: [ ..., CustomAlertComponent],
    declarations: [.., CustomAlertComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

该演示显示了您的错误，但没有导入NgbModule：

https://stackblitz.com/edit/angular-me769x-jms9xx?file=app%2Falert-custom.html

信息：

Template parse errors:

  Can't bind to 'message' since it isn't a known property of 'ngb-alert'.
  1. If 'ngb-alert' is an Angular component and it has 'message' input, then verify that it is part of this module.
  2. If 'ngb-alert' 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. ("<p>
   <ngb-alert type="custom" [ERROR ->][message]="text">{{message}}</ngb-alert>
</p>
   "): ng:///NgbdAlertCustomModule/NgbdAlertCustom.html@1:27
   'ngb-alert' is not a known element:
   1. If 'ngb-alert' is an Angular component, then verify that it is part of this module.
   2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the     '@NgModule.schemas' of this component to suppress this message. ("<p>
   [ERROR ->]<ngb-alert type="custom" [message]="text">{{message}}</ngb-alert>
   </p>

您想要实现的目标的工作示例演示：

https://stackblitz.com/edit/angular-zdqpvr?file=app%2Falert-custom.html