Hello,
I'm playing with Angular 2's router and I hit a situation which I
believe is so common that there must be a proper way to handle it. Every
my page body has the same structure:
* a wrapper:
+ a header
+ a content header
- a heading
+ a content
+ a footer
The header and the footer is always the same. The heading depends on the
content. The content depends on the current URL. I would like not to
repeat myself and thus move all the boilerplate code into a component
(including all the (HTML) code in the content header).
I've already tried to:
1) Write a component that has a router-outlet in place of the content
and have a separate component for each content but I did not find a
*proper* way to pass data to the content components and moreover to
listen on events from the content components (e.g. a successful
login/logout). Also I wasn't able to set the heading depending on what
content is currently displayed (well, I listened to Router and matched
paths...).
2) Write a component that has a an element in place of the content and
have a separate component whose selector matches the content element for
each content but it leads to a lot of code and it requires an unified
"interface" of these components (same input set - potentially leading to
passing a big object with all the inputs to a single @Input() in case of
very different contents - and same output set - potentially leading to a
need to wrap events to special objects in case of very different
contents and to conditionals on the listener's side).
3) Use inheritance but I had to deal with loosing the annotations etc.
and it was said that Angular prefers composition over inheritance...
I think that the best would be to write a component for each content and
to have a way to say: "decorate this component with this boilerplate". I
don't necessarily mean a TypeScript decorator. It can e.g. be an
attribute directive that will build all the stuff *around* the content
component. But maybe there is a completely different way...
What is the proper solution? Or is it something that is not going to be
supported by Angular and should rather be handled on the server side?
Thank you in advance
--
Radek
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
