Angular2：没有字符串的提供者！ (child -> String) in [Array in parent

Posted 2023-02-22

【中文标题】Angular2：没有字符串的提供者！ (child -> String) in [Array in parent

【英文标题】：Angular2 : No provider for String! (child -> String) in [Array in parent

【发布时间】：2016-05-10 23:23:19

【问题描述】：

当我单击添加按钮以使用输入将数据从父级发送到子级时，我正在 angular2 中构建基本的 Todo 应用程序我得到没有字符串提供者！ (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;

【问题讨论】：

您希望将什么传递给class child 的构造函数？

任务、父任务的详细信息以及特定任务的唯一 ID

【参考方案1】：

构造函数参数从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;
  

【讨论】：

您能否提供有用的链接来理解您的这句话或在这里稍微解释一下，“构造函数参数是从 bootstrap 中指定的 DI 提供程序解析的(AppComponent, [SomeProvider, SomeOtherProvider, ...]); "

blog.thoughtram.io/angular/2015/05/18/…, victorsavkin.com/post/126514197956/…, syntaxsuccess.com/viewarticle/…, angular.io/docs/ts/latest/guide/dependency-injection.html

我知道来自输入的数据可用于子类视图/模板（在我的情况下为 taskobject），我如何通过输入教子定义类关于来自父级的 taskobject，

这就是“输入”的作用。您必须使用模板绑定传递输入，例如 <child-component [someInput]="someParentValue">

【参考方案2】：

你得到一个错误，因为 Angular2 自己实例化了child 类并尝试将你在其构造函数级别定义的参数注入其中。他们没有相关的提供者...

否则，如果您想从父组件引用子组件，您可以利用@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();
  

  (...)

希望对你有帮助 蒂埃里

【讨论】：

你的意思是我没有在子组件中定义输入？

哦，抱歉，我错过了您的inputs 属性...我曾经为此使用装饰器；-) 我相应地更新了我的答案

您的问题与您的子组件构造函数以及您手动实例化 child 类的事实有关...

手动实例化子类，怎么样？

这里：this.Array.push(new child(task.value, detail.value, this.id ));，不是吗？ ;-)