Mixing
Angular dependency injection of a component taking place without decorators
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I came across some code in which some components have access to their parent component instance but I could not figure out how the "injection" takes place.
I expected the code to fit in one of those scenarios, but there is no dedicated attribute binding, nor @Injectable decorator in the parent component, nor @Host in children component constructor. Then, how Angular can know it has to inject the parent component instance as the first argument in children components constructor? Is this because parent and child components belong to the same module ? Is there any implicit behavior taking place here ?
Relevant code fragments
Children components receiving the parent instance inherit from an common abstract class
(This class has nothing to do with angular components)
// 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 …
}
…
}
Children have similar @component decorator and constructor :
@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
}
"Parent" component declaration:
@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;
// …
}
…
}
angular angular-components angular-dependency-injection asked Jan 3 at 11:18
StphaneStphane
2,76512133
add a comment |
I came across some code in which some components have access to their parent component instance but I could not figure out how the "injection" takes place.
I expected the code to fit in one of those scenarios, but there is no dedicated attribute binding, nor @Injectable decorator in the parent component, nor @Host in children component constructor. Then, how Angular can know it has to inject the parent component instance as the first argument in children components constructor? Is this because parent and child components belong to the same module ? Is there any implicit behavior taking place here ?
Relevant code fragments
Children components receiving the parent instance inherit from an common abstract class
(This class has nothing to do with angular components)
// 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 …
}
…
}
Children have similar @component decorator and constructor :
@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
}
"Parent" component declaration:
@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;
// …
}
…
}
asked Jan 3 at 11:18
StphaneStphane
2,76512133
1
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35
add a comment |
I came across some code in which some components have access to their parent component instance but I could not figure out how the "injection" takes place.
I expected the code to fit in one of those scenarios, but there is no dedicated attribute binding, nor @Injectable decorator in the parent component, nor @Host in children component constructor. Then, how Angular can know it has to inject the parent component instance as the first argument in children components constructor? Is this because parent and child components belong to the same module ? Is there any implicit behavior taking place here ?
Relevant code fragments
Children components receiving the parent instance inherit from an common abstract class
(This class has nothing to do with angular components)
// 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 …
}
…
}
Children have similar @component decorator and constructor :
@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
}
"Parent" component declaration:
@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;
// …
}
…
}
asked Jan 3 at 11:18
StphaneStphane
2,76512133
I came across some code in which some components have access to their parent component instance but I could not figure out how the "injection" takes place.
I expected the code to fit in one of those scenarios, but there is no dedicated attribute binding, nor @Injectable decorator in the parent component, nor @Host in children component constructor. Then, how Angular can know it has to inject the parent component instance as the first argument in children components constructor? Is this because parent and child components belong to the same module ? Is there any implicit behavior taking place here ?
Relevant code fragments
Children components receiving the parent instance inherit from an common abstract class
(This class has nothing to do with angular components)
// 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 …
}
…
}
Children have similar @component decorator and constructor :
@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
}
"Parent" component declaration:
@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;
// …
}
…
}
asked Jan 3 at 11:18
StphaneStphane
2,76512133
asked Jan 3 at 11:18
StphaneStphane
2,76512133
asked Jan 3 at 11:18
StphaneStphane
2,76512133
asked Jan 3 at 11:18
StphaneStphane
2,76512133
asked Jan 3 at 11:18
StphaneStphane
2,76512133
2,76512133
1
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35
add a comment |
1
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35
1
1
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021277%2fangular-dependency-injection-of-a-component-taking-place-without-decorators%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021277%2fangular-dependency-injection-of-a-component-taking-place-without-decorators%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
it has access to the parent component because of the module injector. I suggest you read this part of the documentation for further explanation, but in two words, the module injector is aware of every class instance in the module, and can inject them when asked to.
– trichetriche
Jan 3 at 11:35