Angular 2，依赖注入之谜

Question

我认为自己是ng2专家（非常喜欢我的第二个应用程序），但是偶尔我也会碰到一个陷阱……这是一个

我有一个名为simpleGridTable的简单表组件：

<simpleGridTable #userSimpleGridTable>
<thead>
<tr>
  <th sortableHeader="name" [sort]="sort">name</th>
  <th sortableHeader="businessId" [sort]="sort">business</th>
  <th>access keys [0-7]</th>
  <th>privileges (id)</th>
  <th>privileges (name)</th>
</tr>
</thead>
<tbody>
<tr class="simpleGridRecord" [table]="userSimpleGridTable" simpleGridRecord *ngFor="#item of m_businesses | OrderBy:sort.field:sort.desc; #index=index" [item]="item" [index]="index">
  <td style="width: 20%" simpleGridData (labelEdited)="onLabelEdited($event,'name')" editable="true" field="name" [item]="item"></td>
  <td style="width: 8%" simpleGridData field="businessId" [item]="item"></td>
  <td style="width: 20%" simpleGridDataChecks (changed)="setAccessMask($event)" [item]="item" [checkboxes]="getAccessMask(item)"></td>
  <td style="width: 12%" simpleGridData field="privilegeId" [item]="item"></td>
  <td style="width: 40%" simpleGridDataDropdown [testSelection]="selectedPriveleges()" (changed)="setPriveleges($event)" field="name" [item]="item" [dropdown]="m_priveleges"></td>
  <!-- <td simpleGridDataImage color="dodgerblue" [field]="item.getKey('studioLite') == '0' ? 'fa-circle' : 'fa-circle-o'" [item]="item"></td> -->
</tr>
</tbody>

在它里面，我有一个simpleGridRecord，您可以在上面看到其指令：

<tr class="simpleGridRecord" [table]="userSimpleGridTable" simpleGridRecord *ngFor="#item of m_businesses | OrderBy:sort.field:sort.desc; #index=index" [item]="item" [index]="index">

simpleGridRecord的组件如下（并尝试依赖注入父SimpleGridTable：

import {Component, Injectable, Input, Output, ChangeDetectionStrategy, HostListener, HostBinding, EventEmitter} from 'angular2/core'

从“ ./SimpleGridTable”导入{SimpleGridTable}；

   @Component({
      selector: 'tr[simpleGridRecord]',
      changeDetection: ChangeDetectionStrategy.OnPush,
      template: `
          <ng-content></ng-content>
    `
})
export class SimpleGridRecord {

    constructor(tb:SimpleGridTable){
        console.log(tb);
    }
    ....

和我的SimpleGridTable组件：

@Component({
selector: 'simpleGridTable',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [SimpleGridTable],
pipes: [OrderBy],
directives: [COMMON_DIRECTIVES, SimpleGridSortableHeader, SimpleGridRecord, SimpleGridData],
styleUrls: [`../comps/simplegrid/SimpleGrid.css`],
template: `
    <table class="table simpleTable">
        <ng-content></ng-content>
    </table>      
`....
})
export class SimpleGridTable {
...

但是由于我收到以下错误，simpleGridRecord似乎无法注入其父表：

我不使用@Inject，就像我正在使用TypeScript一样。我确实将表提供给它的后代

整个类都可以在这里看到： https : //github.com/born2net/studioDashboard/tree/master/src/comps/simplegrid

阅读用TX

肖恩

Answer 1

每当将父级注入子级时，尤其是如果父级和子级是在不同文件中定义的，则很有可能需要将任何对父级类的引用包装在forwardRef ，如下所示：

constructor(@Inject(forwardRef(() => SimpleGridTable) tb: SimpleGridTable ){
    console.log(tb);
}

这是一个变通方法，因为在加载子类（必须先加载）时无法加载父类。

也，

我不使用@Inject，就像我正在使用TypeScript一样。我确实将表提供给它的后代

请注意，有些情况下， @Inject是必要的，打字稿应用程序-其中这是一个。

还需要提及的是，我从未像您在这里看到的那样在providers包含过组件类型，并且我鼓励您验证它是否在执行您认为正在执行的操作。 无论如何，FWIW，作为代码的阅读者，我对它所做的工作并不十分清楚，而将@Inject与构造函数注入配合使用的IMHO是一种将父组件注入其子组件的更干净，更惯用的方法。