Question

试图解决这个问题，但不能......也许这是显而易见的事情：

在html中调用'todo'组件：

<div *ngFor="let item of todoLists"  class="row">

    <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-xs-12 bottom-15">
        <todo [listName]="item"></todo>
    </div>
</div>

TodoComponent组件参数绑定：

export class TodoComponent {
    public todoList:Array<any>;
    public newTodoText:string = '';
    @Input() listName: string;

    constructor(private _todoService: TodoService) {
        console.log("TodoComponent: constructor");
        console.log("TodoComponent: listname - " + this.listName);
        this.todoList = this._todoService.getTodoList(this.listName);
    }

listName参数始终为“未定义”。 TodoComponent初始化两次（因为我有两个列表）。

我在这里做错了什么？

感谢任何帮助。

Answer 1

Input在构造函数中不可用。您需要使用ngOnInit生命周期钩子：

在第一次检查指令的数据绑定属性之后，以及在检查其任何子项之前，立即调用<{ngOnInit。只有在实例化指令时才会调用它。

您可以像这样实施OnInit：

import { OnInit } from "@angular/core";

export class TodoComponent implements OnInit {
    ...
    constructor(private _todoService: TodoService) {
        console.log("TodoComponent: constructor");
    }
    ngOnInit() {
        console.log("TodoComponent: ngOnInit");
        console.log("TodoComponent: listname - " + this.listName);
        this.todoList = this._todoService.getTodoList(this.listName);
    }
}

angular2中未定义的组件参数

1 个答案: