router
router copied to clipboard
Access to this.location: Property 'location' does not exist
The docs says that we can access to this.location
to get the route parameters:
https://vaadin.github.io/vaadin-router/vaadin-router/#/classes/Router/demos/demo/index.html
And it works.
But when using TypeScript, I get an error:
Property 'location' does not exist
![Screenshot 2019-10-21 at 18 14 09](https://user-images.githubusercontent.com/1007051/67197082-a24ae100-f42e-11e9-8382-3aa086c9884c.png)
Looks like an interface or a mixin is missing that would make all router-added properties and callbacks known to TypeScript.
What do you think of a syntax like below?
class PageHome extends RouterView(LitElement) {
...
}
Makes sense!
Any news here? Thanks in advance! 😄
Having this problem too, any update?
Hi everybody, here is a PR that adds View
TypeScript mixin class together Lifecycle
interface: https://github.com/vaadin/vaadin-router/pull/426
with this change, for using this.location
you would have to merge your class with Router.View
:
import {Router} from '@vaadin/router';
class MyView extends HTMLElement {
connectedCallback() {
this.location;
}
}
interface MyView extends Router.View {}
Also, inline casting could be used if merging is not desired:
import {Router} from '@vaadin/router';
class MyView extends HTMLElement {
connectedCallback() {
(this as Router.View).location;
}
}
Mind that accessing this.location
early before Vaadin Router sets it for the component (for instance in constructor
) results in undefined
. With Polymer and LitElement, though, it should work with their typical updates and rendering timing, this.location
should be available by the time when first connectedCallback
does initial update and rendering, for instance.
I have also considered a mixin function like so:
class PageHome extends RouterView(LitElement) {
...
}
the thing is, this compiles the function call to JS, so it requires the implementation. We could a trivial one, but I doubt that it brings any value to have this in runtime:
export const RouterView = (superClass) => superClass;