I have some experience with other frameworks and architectural principles, and I absolutely don't understand the decision of Angular Team to deprecate the directivies
property of a Component in RC6 in favor of declarations
in NgModule.
Usually the architecture is about encapsulation, but suddenly if some functionallity of a component should be encapsulated by a child component, the subcomponent "leaks" up to the module, where it now should be registered.
-
So why by having a logical tree of components in a module, all of them should be registered "plain" inside NgModule?
-
Does this approach don't blow the ngmodule with a lot of imports and delcarations?
I understand that we can split everything into multiple modules, but inside a single module such global "load and register" remembers me to bunch of global script [src]
tags inside html. I thought we have moved away from this pattern, but it looks like Angular returns to it.
It seems, I miss something here, could somebody please explain me?
Right now, we mimic nested components declaration, so that each component exports list of used components, and then in NgModule we go though all root components, collect their dependencies and prepair full declarations
list.
It looks like this:
src/app
- /components/home-view/
- /toolbar
/menu-button
- menu-button.component.ts
- toolbar.component.ts
- home-view.component.ts
- app.module.ts
app.module.ts
import { HomeViewComponent } from './components/home-view/home-view.component';
namespace Utils {
export function flatternDirectives (arr: any[] = []): any[] {
const declarations = arr.reduce((compos, compo) => {
compos.push(...flatternDirectives(compo.directives), compo);
return compos;
}, []);
return Array.from(new Set(declarations));
}
}
@NgModule({
declarations: Utils.flatternDirectives([
HomeViewComponent,
]),
bootstrap: [AppComponent]
})
export class AppModule { }
./components/home-view/home-view.component.ts
import { ToolbarComponent } from './toolbar/toolbar.component';
@Component({
selector: 'app-home-view',
template: `<app-toolbar></app-toolbar>`,
})
export class HomeViewComponent {
static directives = [ ToolbarComponent ]
}
./components/home-view/toolbar/toolbar.component.ts
import { MenuButtonComponent } from './menu-button/menu-button.component';
@Component({
selector: 'app-toolbar',
template: `<app-menu-button></app-menu-button>`,
})
export class ToolbarComponent {
static directives = [ MenuButtonComponent ]
}
./components/home-view/toolbar/menu-button/menu-button.component.ts
@Component({
selector: 'app-menu-button',
template: `<button></button>`,
})
export class MenuButtonComponent {}
Are there any caveats in such approach?
Thank you.
from Why subcomponents in Agular should be registered via NgModule? What about encapsulation?
No comments:
Post a Comment