Angular2：内联模板出错

Question

我正在将一个组件作为指令传递到另一个组件中，以便在该组件的模板中使用，但是我在内Error in inline template得到一个Error in inline template ，这是非常模糊的，但它指向我指令。 所以我不确定我是否在实际组件本身中正确实例化它。

消息list.ts

import {Component, Input} from '@angular/core';
import {Message} from './message';
import {MessageModal} from './message';

@Component({
  selector: 'message-list',
  template: require('./message-list.html'),
  styles: [require('./message-list.css')],
  directives: [MessageModal]
})

export class MessageList {
  @Input()
  messages: Message[];
}

消息list.html

<div class="messages">
  <table class="table table-striped" style="width:75%">
    <tr *ngFor="let item of messages">
      <td><message-modal messageInput="{{item.message}}"></message-modal></td>
    </tr>
  </table>
</div>

MessageModal接受输入， messageInput ， message也是Message属性。 该错误位于message-list.html的第4行，带有<message-modal>指令。 这里发生了什么？

Answer 1

你正在将messageInput作为message-modal的输入，并且你通过@Input messages进入.ts文件进行@Input messages一些更改： -

<div class="messages">
  <table class="table table-striped" style="width:75%">
    <tr *ngFor="let item of messages">
      <td><message-modal [messageInput]="item.message"></message-modal></td>
    </tr>
  </table>
</div>


export class MessageList {
  @Input() messageInput: any
  messages: Message[];
  constructor(){
   console.log(this.messageInput);
  }
}

有关更多信息，请参阅此处@input的工作示例

@Input的工作示例

Answer 2

问题在于@Input属性。 MessageList组件没有来自其父级的任何输入。 但是message-modal来自其父级名为MessageList 。 所以在MessageList中使用@Input是没有意义的。

export class MessageList {
  @Input()                    
// dont require as its parent doesn't send any data I guess.

  messages: Message[];        
// dont require.still as you are using messages as an array I don't know how'd you get its value.
}

以下代码将在以后需要，

export class MessageModal{ 
  @Input() messageInput: any;
}