Angular2:没有字符串提供者! (child -> String) in [Array in parent
Angular2 : No provider for String! (child -> String) in [Array in parent
我在 angular2 中构建基本的 Todo 应用程序,当我单击添加按钮以使用输入将数据从父级发送到子级时,我得到没有字符串提供者! (child->string), 没有显示数据,只显示子 class 处的按钮,是什么意思
这里是父组件:
@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 自己实例化 child
class 并尝试在其中注入您在其构造函数级别定义的参数,因此您遇到了一个错误。他们没有关联的提供商...
否则如果你想从父组件引用子组件,你可以利用 @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();
}
}
这是更新的 plunkr:http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview。
您会注意到 @Query
参数装饰器也可以使用:
export class AppComponent {
constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
this.childcmp = children.first();
}
(...)
}
希望对你有帮助,
蒂埃里
从 bootstrap(AppComponent, [SomeProvider, SomeOtherProvider, ...]);
中指定的 DI 提供程序解析构造函数参数
输入是自动分配的,但仅在对 ngOnInit()
的生命周期调用之后才分配。
@Component({
selector : 'child-component',
inputs : ['taskobject'],
//outputs : ['objectsend'],
template : `
{{taskobject?.task}}
<!-- use the safe-navigation operator ?. to avoid errors
when `taskobject` is not yet set
-->
{{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
taskobject: any;
task : string;
detals : string;
id : number;
//array : any[];
constructor() {
}
// when this callback is called the
// `taskobject` (from `inputs : ['taskobject'],`)
// is initialized
ngOnInit() {
this.task = taskobject.task;
this.detals = taskobject.detail;
this.id = taskobject.id;
}
}
我在 angular2 中构建基本的 Todo 应用程序,当我单击添加按钮以使用输入将数据从父级发送到子级时,我得到没有字符串提供者! (child->string), 没有显示数据,只显示子 class 处的按钮,是什么意思
这里是父组件:
@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 自己实例化 child
class 并尝试在其中注入您在其构造函数级别定义的参数,因此您遇到了一个错误。他们没有关联的提供商...
否则如果你想从父组件引用子组件,你可以利用 @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();
}
}
这是更新的 plunkr:http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview。
您会注意到 @Query
参数装饰器也可以使用:
export class AppComponent {
constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
this.childcmp = children.first();
}
(...)
}
希望对你有帮助, 蒂埃里
从 bootstrap(AppComponent, [SomeProvider, SomeOtherProvider, ...]);
输入是自动分配的,但仅在对 ngOnInit()
的生命周期调用之后才分配。
@Component({
selector : 'child-component',
inputs : ['taskobject'],
//outputs : ['objectsend'],
template : `
{{taskobject?.task}}
<!-- use the safe-navigation operator ?. to avoid errors
when `taskobject` is not yet set
-->
{{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
taskobject: any;
task : string;
detals : string;
id : number;
//array : any[];
constructor() {
}
// when this callback is called the
// `taskobject` (from `inputs : ['taskobject'],`)
// is initialized
ngOnInit() {
this.task = taskobject.task;
this.detals = taskobject.detail;
this.id = taskobject.id;
}
}