Question

我已经为此寻找了答案，但实际上不知道为什么这不起作用...请参阅我的组件源代码：

ts文件：

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'alerta',
    templateUrl: 'alerta.component.html',

})

export class AlertaComponent {

    // Os atributos abaixo são inputs, serão alimentados pelo componente "pai"

    @Input() messageStatus: string;

}

这是我的模板文件：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="alert alert-warning alert-dismissable" >
    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>{{ messageStatus }}
</div>

在这里，我如何投入另一个组件：

 <alerta messageStatus="teste"></alerta>

我没有看到一个没有工作的理由......输入功能并没有在屏幕上显示其内容。任何想法？

Answer 1

<alerta [messageStatus]="teste"></alerta>

或者如果它是一个字符串值，那么它也可以使用

<alerta messageStatus="{{teste}}"></alerta>

没有[]和{{}}，就没有发生Angular绑定。相反，teste作为文字字符串传递。

Answer 2

来自控制台的所有日志？也许你没有在@ngModule中添加组件到声明？

Answer 3

在父模板中发送您的输入

using System;
using System.Data;

class Program
{
    static void Main()
    {
        // Get the DataTable.
        DataTable table = GetTable();
        // ... Use the DataTable here with SQL.
    }

    /// <summary>
    /// This example method generates a DataTable.
    /// </summary>
    static DataTable GetTable()
    {
        // Here we create a DataTable with four columns.
        DataTable table = new DataTable();
        table.Columns.Add("Dosage", typeof(int));
        table.Columns.Add("Drug", typeof(string));
        table.Columns.Add("Patient", typeof(string));
        table.Columns.Add("Date", typeof(DateTime));

        // Here we add five DataRows.
        table.Rows.Add(25, "Indocin", "David", DateTime.Now);
        table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now);
        table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
        table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
        table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
        return table;
    }
}

Angular2中的@Input无法正常工作

3 个答案: