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 for reading

肖恩

Answer 1

每当您向父级注入父级时，特别是如果父级和子级在不同的文件中定义，您很可能需要在子级中包含对子级的任何引用。 forwardRef，如下：

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

这是一个解决方法，因为在加载子类（必须首先加载）时不可能加载父类。

另外，

  

我没有使用@Inject，因为我正在使用TypeScript ...我[提供]表格给它的死者

请注意，在Typescript应用程序中有些情况需要@Inject - 这是其中之一。

还要提到的是，我在providers中从未见过包含在@Inject中的组件类型，我鼓励您验证这是否符合您的想法＃＆＃ 39;做的。在任何情况下，FWIW，你正在做的事情并不是我作为你的代码的读者非常清楚，并且使用NSPredicate *intersectPredicate = [NSPredicate predicateWithFormat:@"SELF IN %@", otherArray]; NSArray *intersect = [firstArray filteredArrayUsingPredicate:intersectPredicate]; 进行构造函数注入的恕我直言是一种更清晰，更惯用的方法将父母成分注入他们的孩子。