Angular 5: Completion and Nav to Declaration on custom directives with binding () or []
I've got some custom directives that take an output for event handling (e.g. for handling mouse enter/leave on an ancestor). So they have @Output:
@Output() tmHover = new EventEmitter<Event>();
@Input() tmHoverSelector: string;
And can be used as:
<div (tmHover)="handleHoverChange(node, $event)" tmHoverSelector=".ui-treetable-row" >
This compiles and works just fine. However, IntelliJ doesn't recognize the attribute within the parens: (tmHover). But if I remove them:
<div tmHover >
then IntelliJ recognizes it just fine: It highlights it, I can navigate to it (It takes me to the @Directive annotation), and I can even code-complete (e.g: on "tm"), But this won't actually work, of course.
Interestingly if I put the selector before it (redundantly), IntelliJ does recognize it, and as far as I can tell, this doesn't cause a problem with angular compile
<div tmHover (tmHover)="handleHoverChange(node, $event)" tmHoverSelector=".ui-treetable-row" >
Is this just a bug, or is there something I need to configure somewhere?
IDEA Info:
IntelliJ IDEA 2017.3.4 (Ultimate Edition)
Build #IU-173.4548.28, built on January 29, 2018
JRE: 1.8.0_152-release-1024-b11 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 7 6.1
请先登录再写评论。
Binding work correctly for me:
can yu check if the issue persists after invalidating caches (File | Invalidate caches, Invalidate and restart)? Also, does the other angular stuff work? I.e, are the standard directives, etc. recognized?
Sorry, apparently I can't write a post title. My post was about directives In spite of what it said in the title (fixed). You are looking at a component, selected, by element name "my-hero-detail", I presume. I'm guessing that since is not embedded in binding syntax, () or [], it doesn't have that problem.
That said, I tried invalidating the cache, as you suggest. It made no difference.
Standard directives are recognized (e.g. click), sort of. They don't highlight as identifiers elsewhere, but I can navigate to a core.scripting.rnc. that is in the idea.jar.
please share a sample project/files i can use to recreate the issue;
may be related to https://youtrack.jetbrains.com/issue/WEB-27874
Create a brand new angular-cli project, then add:
Directive: my-test-directive.ts:
Add this to an app.component.html:
Add this to app.component.ts, in class AppComponent :
You will find that:
In app.component.html, on "appMyTest"
In my-test-directive.ts, on MyTestDirective find usages (Ctrl-B, again) does not identify app.component.html as one of the usages.
However, if I add a redundant appMyTest:
then all works as expected However, it is ugly at best and might have some weird results in the template compiler at worst..
Regarding WEB-27874, I do get an autocomplete when typing outside of the parens but the complete gives
rather than:
But that's minor. I'm more concerned about the navigation/usage. Also, if the directive has another input, without the redundant name, there's a warning: Attribute attributeName is not allowed here.
If you need more, let me know where I can share a project, but this is pretty simple.
thanks for details, logged as https://youtrack.jetbrains.com/issue/WEB-31647. Please follow it for updates