Typescript Angular2:字符串没有提供程序！（子项->字符串）在父项中的[Array]中

我正在angular2中构建基本Todo应用程序。当我单击“添加”按钮以使用输入从父级向子级发送数据时，我没有为string！child->string获取任何提供程序，并且没有显示任何数据。仅在子级显示按钮，这是什么意思

以下是父组件：

@Component({
selector : 'parent-component',
directives : [child],
template : `
<h1 class= "text-center">ToDo App</h1>
<div class = "form-group">
<lable>Task</lable>
<input type = "text" class = "form-control" #task>
<lable>Detail</lable>
<input type = "text" class = "form-control" #detail >
<button type = "submit" class  = "btn btn-default" 
(click) = "addtask(task,    detail)">Add Task</button>


<child-component *ngFor = "#todo of Array" [taskobject] = "todo">
Loading... </child-component>
</div>

`
})
class parent{
//taskobj : {task : string, details : string, id:  number};
Array : child[];
id : number;

constructor(){

    //i want this to initialize asa parent create
    this.Array = [];
}

addtask(task : HTMLInputElement, detail : HTMLInputElement){
    // this.taskobj.task= task.value;
    // this.taskobj.details = detail.value;
   this.id = Date.now();
    // this.array.push();

    this.Array.push(new child(task.value, detail.value, this.id ));
    console.log(Array)
    task.value = '';
    detail.value = '';

}

@Component({

selector : 'child-component',
inputs : ['taskobject'],
//outputs : ['objectsend'],
template : `
  {{taskobject.task}}
  {{taskobject.details}}
  <button type = "button" class = "btn btn-default" 
  (click) = "deletetask()">Delete</button>
  <button type = "button" class = "btn btn-defualt" 
  (click) = "updatetask()">Update</button>

  `
  })
class child{

//we are creating a instance just as configured as child component 
task : string;
detals : string;
id : number;
//array : any[];

constructor(task : string, detail : string, id : number){
    this.task = task;
    this.detals = detail;
    this.id = id;
}

}

这是子组件：

@Component({
selector : 'parent-component',
directives : [child],
template : `
<h1 class= "text-center">ToDo App</h1>
<div class = "form-group">
<lable>Task</lable>
<input type = "text" class = "form-control" #task>
<lable>Detail</lable>
<input type = "text" class = "form-control" #detail >
<button type = "submit" class  = "btn btn-default" 
(click) = "addtask(task,    detail)">Add Task</button>


<child-component *ngFor = "#todo of Array" [taskobject] = "todo">
Loading... </child-component>
</div>

`
})
class parent{
//taskobj : {task : string, details : string, id:  number};
Array : child[];
id : number;

constructor(){

    //i want this to initialize asa parent create
    this.Array = [];
}

addtask(task : HTMLInputElement, detail : HTMLInputElement){
    // this.taskobj.task= task.value;
    // this.taskobj.details = detail.value;
   this.id = Date.now();
    // this.array.push();

    this.Array.push(new child(task.value, detail.value, this.id ));
    console.log(Array)
    task.value = '';
    detail.value = '';

}

@Component({

selector : 'child-component',
inputs : ['taskobject'],
//outputs : ['objectsend'],
template : `
  {{taskobject.task}}
  {{taskobject.details}}
  <button type = "button" class = "btn btn-default" 
  (click) = "deletetask()">Delete</button>
  <button type = "button" class = "btn btn-defualt" 
  (click) = "updatetask()">Update</button>

  `
  })
class child{

//we are creating a instance just as configured as child component 
task : string;
detals : string;
id : number;
//array : any[];

constructor(task : string, detail : string, id : number){
    this.task = task;
    this.detals = detail;
    this.id = id;
}

}

---

您得到一个错误，因为Angular2自己实例化子类，并尝试将您在构造函数级别定义的参数注入其中。没有相关的提供程序

否则，如果要从父组件引用子组件，可以利用@ViewChild装饰器通过注入从父组件引用子组件：

import { Component, ViewChild } from 'angular2/core';  

(...)

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App</h1>
    <child></child>
    <button (click)="submit()">Submit</button>
  `,
  directives:[App]
})
export class AppComponent { 
  @ViewChild(SearchBar) searchBar:SearchBar;

  (...)

  someOtherMethod() {
    this.searchBar.someMethod();
  }
}

希望它能帮助你，

---

Thierry

构造函数参数是从bootstrapAppComponent中指定的DI提供程序中解析的，[SomeProvider，SomeOtherProvider，…]

输入自动分配，但仅在生命周期调用ngOnInit之后

---

您希望传递给类child的构造函数的是什么？任务，来自父任务的详细信息，以及特定任务的唯一id您的意思是我没有在子组件中定义输入？哦，对不起，我错过了您的输入属性…我曾经为此使用decorator；-我根据您的问题链接到您的子组件co更新了我的答案构造函数和您手动实例化子类的事实…手动实例化子类，如何？这里：this.Array.pushnew childtask.value，detail.value，this.id；，no？；-您能提供有用的链接来理解这句话吗？或者在这里稍作解释，构造函数参数是从bootst中指定的DI提供程序解析的rapAppComponent，[SomeProvider，SomeOtherProvider，…]；，，我知道来自输入的数据可用于子类视图/模板在我的情况下，taskobject，我如何通过输入向子类定义类传授来自父类的taskobject，这就是“输入”的作用。必须使用模板绑定传递输入，如