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

Question

这是我的代码：

我有我的 app.module.ts

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

custom-alert.component.html

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

自定义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 错误错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“消息”，因为它不是已知属性 1. 如果“自定义警报”是一个 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

Answer 2

将架构添加到您的应用模块

@NgModule({
  declarations: [
CustomAlertComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule ],
  exports: [  ],
  providers: [  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

对于组件，尝试首先在构造函数上初始化它。

    message: string;
      type: string;
      staticAlertClosed:boolean = false;

      constructor() {
    this.message = [];
}