Conversation
|
View your CI Pipeline Execution ↗ for commit bc503ab
☁️ Nx Cloud last updated this comment at |
🚀 Preview Deploy Report✅ Successfully deployed preview here |
axdanbol
left a comment
axdanbol
left a comment
There was a problem hiding this comment.
I think I need to give some more thought on how this should work so put this on pause for now
| */ | ||
| @Directive({ | ||
| selector: '[hraPortalOutletGroup]', | ||
| standalone: true, |
There was a problem hiding this comment.
Remove. Standalone is the default
| readonly activeOutlet = input<string>(''); | ||
|
|
||
| /** Query all registered portal outlet name directives within this group */ | ||
| private readonly outlets: Signal<readonly HraPortalOutletNameDirective[]> = contentChildren( |
There was a problem hiding this comment.
Remove. It is the responsibility of the name directive to register with the closest group
| */ | ||
| @Directive({ | ||
| selector: '[hraPortalOutletName]', | ||
| standalone: true, |
There was a problem hiding this comment.
Remove. Standalone is the default
| * Registers itself with the closest HraPortalOutletGroupDirective. | ||
| */ | ||
| @Directive({ | ||
| selector: '[hraPortalOutletName]', |
There was a problem hiding this comment.
Update to [cdkPortalOutlet][name]
| }) | ||
| export class HraPortalOutletNameDirective implements OnInit, OnDestroy { | ||
| /** The name of this outlet, used to identify it within the group */ | ||
| readonly name = input.required<string>({ alias: 'hraPortalOutletName' }); |
There was a problem hiding this comment.
Remove the alias. This should be used in the template like so:
<ng-template cdkPortalOutlet name="my-outlet" />
| readonly name = input.required<string>({ alias: 'hraPortalOutletName' }); | ||
|
|
||
| /** Reference to the CdkPortalOutlet contained within this element */ | ||
| private readonly portalOutlet = contentChild(CdkPortalOutlet); |
There was a problem hiding this comment.
I think this should be inject(CdkPortalOutlet)
| */ | ||
| constructor() { | ||
| /** Effect to handle name changes and re-register with the group */ | ||
| effect(() => { |
There was a problem hiding this comment.
Use the cleanup functionality of effect for unregistering when the name changes like this:
effect((onCleanup) => {
const name = this.name();
if (this.group) {
this.group.register(name, this);
onCleanup(() => this.group.unregister(name))
}
})Then you can also remove the onInit and onDestroy hooks
2 participants
This issue closes #2045