Clever Geek Handbook

Angular 4: Non-standard attribute directive in <router-output> fails

I am currently trying to create a custom attribute directive for my Angular 4 (v 4.2.6) app with component based routing. I followed the official Angular guide on how to create such an attributes directive.

Everything works fine when the directive myHighlight

is placed on the root component. Unfortunately, it doesn't work (attribute directive fails) when used in conjunction with @angular/router

inside a component inserted into router-outlet

.

To isolate the problem from my application, I created a Plunkr showing the problem .

On this Plunkr you can see a custom attribute directive called myHighlight

( highlight.directive.ts

). This directive is used in the root component ( app.ts

).

Then I added two components that are used with the router for component based routing: OneComponent

( one.component.ts

) and TwoComponent

( two.component.ts

) are bound to /one

respectively /two

. Inside these two components a directive is also used myHighlight

, but unfortunately it doesn't execute / execute correctly and only the text of the HTML element ( p

) it is attached to is not displayed .

If anyone can give me a pointer on what I am doing wrong or what needs to be changed, I would be very grateful.

+3


source share


1 answer


declarations: []

from AppModule

are only available for components in ComponentsModule

. If you want to reuse components or directives in different modules, create a model module and add this function module to imports: []

each module in which you want to use them.



+1


source






More articles:


All Articles