Question

我将一个组件作为指令传递给另一个组件，以便在该组件的模板中使用，但是我得到的是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的输入，并且您正在通过.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

的工作示例

Working Example of @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;
}

Angular2：内联模板出错

2 个答案: