我的目标是当用户点击/ messages上显示的消息时,它会将消息显示信息重定向到/ message。如果我做错了,请指导我正确的方向。
这是我的错误:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'messages' since it isn't a known property of 'message'. ("ge-header">{{user.name}}</h2>
<ul class="list-group" style="list-style-type: none;">
<message [ERROR ->][messages]="message"></message>
Inbox: <ul class="list-group" style="list-style-type: none;">
"): MessagesComponent@3:13
'message' is not a known element:
1. If 'message' is an Angular component, then verify that it is part of this module.
2. If 'message' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("class="page-header">{{user.name}}</h2>
<ul class="list-group" style="list-style-type: none;">
[ERROR ->]<message [messages]="message"></message>
Inbox: <ul class="list-group" style="list-style-type: no"): MessagesComponent@3:4 ; Zone: <root> ; Task: Promise.then ; Value:
消息组件:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
messages: Object;
username: String;
user: Object;
messageID: String;
public UserList: Object;
public RecpList: Object;
constructor(private authService: AuthService,
private router: Router
) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
this.username = profile.user.username;
},
err => {
console.log(err);
return false;
});
this.authService.getMessages(this.username).subscribe(list => {
this.UserList = list.UserList;
this.RecpList = list.RecpList;
},
err => {
console.log(err);
return false;
});
}
onMessageClick(messageID){
this.authService.getMessage(this.user, messageID).subscribe(list => {
console.log(list);
this.router.navigate(['/message', ]);
});
}
}
消息html:
<div *ngIf="user">
<h2 class="page-header">{{user.name}}</h2>
<ul class="list-group" style="list-style-type: none;">
<message [messages]="message"></message>
Inbox: <ul class="list-group" style="list-style-type: none;">
<li *ngFor="let message of RecpList" (click)="onMessageClick(message.messageID)" class="list-group" style="text-align: center;"><strong>{{message.createdBy}}</strong> {{message.subject}} <strong>{{message.dateCreated}}</strong></li>
</ul>
Sent: <ul class="list-group" style="list-style-type: none;">
<li *ngFor="let message of UserList" (click)="onMessageClick(message.messageID)" class="list-group" style="text-align: center;"><strong>{{message.recipients}}</strong> {{message.subject}} <strong>{{message.dateCreated}}</strong></li>
</ul>
<li class="list-group"><a [routerLink] = "['/newmessage']">New Message</a></li>
</ul>
</div>
消息组件:
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-message',
templateUrl: './message.component.html',
styleUrls: ['./message.component.css'],
inputs: ['messages']
})
export class MessageComponent implements OnInit {
messages: Object;
user: Object;
createdBy: String;
recipients: String;
subject: String;
message: String;
previousMessage: String;
nextMessage: String;
constructor(private authService: AuthService,
private router: Router) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
}
}
消息html:
<p>{{messages.subject}}</p>
答案 0 :(得分:1)
所以它看起来像几件事:
this.router.navigate(['/message', ]);
中添加ID或消息,看起来您可能错过了将其添加到其中{ path: 'message/:id', component: MessageComponent }
您可以使用以下内容从params获取传入的内容:
this.message = this.route.params.subscribe(params =&gt; { this.id = params ['id']; });