Issue
Is is possible in Angular 2 to restrict a Component
only to a specific parent element on a page. In other words, only allow a Component
on a page if a certain parent element exists. Use case:
should be possible:
<parent>
<child></child>
</parent>
should not be possible (has no <parent>
tag as a parent)
<child></child>
I need the parent Component
to transclude and the <child>
tag is optional, so I can't do:
@Component({
/*...*/
selector: 'parent',
template: `<child></child>`
});
Any ideas?
Solution
Something like that should do the trick.
Parent component :
@Component({
selector: 'parent',
template: '<ng-content></ng-content>'
})
export class ParentComponent {
}
Child component :
@Component({
selector: 'child',
template: ''
})
export class ChildComponent {
constructor(parent: ParentComponent){
// will throw a no provider error if parent is not set
}
}
then you can use your components like you want:
<parent><child></child></parent> <!-- works -->
<child></child> <!-- fails -->
Note that when you inject the parent in the child, the child can actually be the grand-child without throwing an error.
Answered By - n00dl3
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.