我试图在项目的不同模块中使用子组件,但收到错误“无法绑定(bind)到‘消息’,因为它不是‘or-app-wysiwyg’的已知属性。我看不到我的导入有任何问题,并且我已经检查了我的表单模块是否已正确添加。我相信问题与选择器有关,但到目前为止我所尝试的一切都没有消除错误。
Wysiwyg.Component.ts
import { Component, OnInit} from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
selector: 'or-app-wysiwyg',
templateUrl: './wysiwyg.component.html',
styleUrls: ['./wysiwyg.component.scss']
})
export class WysiwygComponent implements OnInit {
public Editor = ClassicEditor;
message = '';
constructor() { }
ngOnInit() {
}
}
Wysiwyg.Component.html
<ckeditor [(ngModel)]="message" [editor]="Editor"></ckeditor>
Notes.Component.ts
import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Note } from '../../../../../core/src/models/note';
import { NoteOutgoing } from 'projects/core/src/models/noteOutgoing';
import { AuthService } from 'core';
import { NotesService } from 'projects/core/src/services/note.service';
@Component({
selector: 'app-notes',
templateUrl: './notes.component.html',
styleUrls: ['./notes.component.scss'],
})
export class NotesComponent implements OnInit {
@Input() message: any;
public Editor = ClassicEditor;
notes: Note[] = [];
noteOutgoing: NoteOutgoing = {message: ''};
constructor(private noteService: NotesService, private authService: AuthService,
private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.getNotes();
}
getNotes() {
this.noteService.getNotesFromDB().subscribe(result => {
this.notes = result;
this.cdr.detectChanges();
}, error => console.error(error));
}
addNote() {
const name = this.authService.getUser().firstName + ' ' + this.authService.getUser().lastName;
const note: Note = {name, message: this.noteOutgoing.message, date: 'date', tags: 'tag'};
this.notes.push(note);
console.log(this.notes);
this.noteService.addNoteToDB(this.noteOutgoing).subscribe(() => {
}, error => console.error(error));
this.noteOutgoing.message = '';
}
}
Note.Module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NotesComponent } from './notes.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/forms';
import { WysiwygComponent } from 'projects/core/src/components/wysiwyg/wysiwyg.component';
@NgModule({
imports: [
CommonModule,
CKEditorModule,
FormsModule
],
declarations: [NotesComponent, WysiwygComponent]
})
export class NotesModule {}
Notes.Component.html
<or-app-wysiwyg [message]="message"></or-app-wysiwyg>
<button type="button" (click)="addNote()" class="btn btn-
default">Save</button>
<div class= "card m-3" *ngFor= "let note of notes">
Name: {{note.name}} <br> Note: {{note.message}} <br> Date: {{note.date}} <br>
Tags: {{note.tags}}
</div>
最佳答案
您的错误消息是这样的:
'Can't bind to 'message' since it isn't a known property of 'or-app-wysiwyg'
您尚未发布有问题的代码,但错误消息表明您正在尝试绑定(bind)到元素 or-app-wysiwyg
上的 message
属性,该属性看起来像这样:
<or-app-wysiwyg [message]="message">
</or-app-wysiwyg>
为此,您需要将 message
属性指定为 @Input()
属性。
Wysiwyg.component.ts
export class WysiwygComponent implements OnInit {
public Editor = ClassicEditor;
@Input() message: string;
}
关于javascript - 无法绑定(bind)到 'property',因为它不是 'selector' 的已知属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60599645/