从 Angular 2 中的组件传递数据

Question

我的目标是当用户点击显示在 /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>

这是我的组件结构

Answer 1

所以它看起来像几件事：

1. 您需要在this.router.navigate(['/message', ]); 中包含 id 或消息，看起来您可能错过了在其中添加它
2. 您需要像这样在路由器中指定路径{ path: 'message/:id', component: MessageComponent }

3. 您可以使用以下方法从参数中获取传入的内容：

   this.message = this.route.params.subscribe(params => { this.id = params['id']; });