無法綁定到“屬性”，因為它不是“組件”的已知屬性

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 = [];
}