Я столкнулся с кодом, в котором некоторые компоненты имеют доступ к экземпляру родительского компонента, но Я не мог понять, как происходит «внедрение» .
Я ожидал, что код будет соответствовать одному из этих сценариев , но в родительском компоненте нет ни привязки выделенного атрибута, ни декоратора @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;
// …
}
…
}