1

我遇到了一些代码，其中一些组件可以访问它们的父组件实例，但我无法弄清楚“注入”是如何发生的。

我希望代码适合其中一种情况，但是@Injectable父组件中没有专用的属性绑定，也没有装饰器，@Host子组件构造函数中也没有。那么，Angular 怎么知道它必须将父组件实例作为子组件构造函数中的第一个参数注入呢？这是因为父组件和子组件属于同一个模块吗？这里是否发生了任何隐含行为？

相关代码片段

接收父实例的子组件继承自一个通用抽象类
（该类与角度组件无关） 

// The "parent" component file
import {GraphComponent} from "./graph.component";

export abstract class GraphElement implements OnDestroy {
    graph: GraphComponent;

    constructor(graph: GraphComponent, element: ElementRef) {
        this.graph = graph;
        // misc instructions …
    }
    …
}

孩子们有类似的 @component 装饰器和构造器：

@Component({
  selector: 'g[lines]',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `` // Empty string (not truncated), by the way why not using a directive instead?
})
export class LineComponent extends GraphElement {

    constructor(graph: GraphComponent, element: ElementRef) {
        super(graph, element);
        console.log(graph) // Does output the "parent" graph component instance to the console
    }

“父”组件声明：

@Component({
  selector: 'graph',
  styleUrls: ['./graph.component.scss'],
  providers: [MiscService],
  // Truncated template
  template: `
         <svg>
             …
             <svg:g>
                 // The only input is pure d3Js chart data
                 <svg:g *ngIf="linesData" [lines]="linesData" />
             </svg:g>
             …
         </svg>
  `
})
export class GraphComponent implements AfterViewInit, OnDestroy {
    constructor(public elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef /*, misc unrelated services */) {
        this.element = elementRef.nativeElement;
        // …
    }
    …
}
4

0 回答 0