[英]Can't bind to 'property' since it isn't a known property of 'component'
This is my code:这是我的代码:
I have my app.module.ts我有我的 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 custom-alert.component.html
<ngb-alert *ngIf="!staticAlertClosed" [type]="type" (close)="true">{{message}}</ngb-alert>
custom-alert.component.ts自定义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(){}
}
and start-workflow.component.ts和 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;
}
}
I'm having the following error:我有以下错误:
Blockquote core.js:1440 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property 1. If 'custom-alert' is an Angular component and it has 'message' input, then verify that it is part of this module.
Blockquote core.js:1440 错误错误:未捕获(承诺):错误:模板解析错误:无法绑定到“消息”,因为它不是已知属性 1. 如果“自定义警报”是一个 Angular 组件并且它有“消息”输入,然后验证它是这个模块的一部分。 2. If 'custom-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2. 如果'custom-alert' 是一个Web 组件,则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息。 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
3.要允许任何属性添加'NO_ERRORS_SCHEMA'到这个组件的'@NgModule.schemas'。 (" ][(message)]="text"> "): ng:///StartWorkflowModule/StartWorkflowComponent.html@1:16 'custom-alert' is not a known element:
(" ][(message)]="text"> "): ng:///StartWorkflowModule/StartWorkflowComponent.html@1:16 'custom-alert' 不是已知元素:
Please help请帮忙
You have to import and add NgbModule
to your app.module.ts
file您必须将
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 { }
This demo show your error without the import of NgbModule
:这个演示在没有导入
NgbModule
情况下显示您的错误:
https://stackblitz.com/edit/angular-me769x-jms9xx?file=app%2Falert-custom.html https://stackblitz.com/edit/angular-me769x-jms9xx?file=app%2Falert-custom.html
message:信息:
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>
Working example demo of what you are trying to achieve:
您正在尝试实现的工作示例演示:
https://stackblitz.com/edit/angular-zdqpvr?file=app%2Falert-custom.html
https://stackblitz.com/edit/angular-zdqpvr?file=app%2Falert-custom.html
add schemas to your App Module将架构添加到您的应用模块
@NgModule({
declarations: [
CustomAlertComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule ],
exports: [ ],
providers: [ ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
and for component, try to initialize it first on the constructor.对于组件,尝试首先在构造函数上初始化它。
message: string;
type: string;
staticAlertClosed:boolean = false;
constructor() {
this.message = [];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.