Linking Pages

Linking Pages

Our website has a few different methods in which links to another page can be made. This is because angular relies on a system of stringly typed links which are prone to failure, and cannot be updated or changed in bulk very easily. We have created two concepts when it comes to routing: StrongRoutes, and Urls.

StrongRoutes

A StrongRoute is a class which represents a route on the website, which is usually associated to some page through the PageComponent class. In each of the .menus.ts files you will find StrongRoutes generated using the following format:

const baseRoute = StrongRoute.newRoot().add("custom_route");
const subRoute = baseRoute.add("new_route");

You can take these instances, and link to them inside the angular components using the following code:

<a [strongRoute]="subRoute" strongRouteActive="active">Link</a>

The above code will link to the subRoutes page, and will also apply the active class to the link if the current page matches that link. If you don't want to set the active class, you can simply remove the strongRouteActive property from the class.

StrongRoutes accept additional route and query parameters which can be used to fill in unknown portions of the route. An example of this is the following route:

const baseRoute = StrongRoute.newRoot().add("custom_route");
const subRoute = baseRoute.add(":model_id");

The subRoute StrongRoute now expects that a model_id route parameter will be set for it to properly navigate. If the model_id exists in the url of the current page, the StrongRouteDirective (which is called by [strongRoute]) will automatically extract the value and insert it into the StrongRoute when it attempts to generate a valid link. However, if this route parameter or - in the more likely scenario - the query parameter doesn't exist, we can provide the value directly using the following example:

<a
  [strongRoute]="subRoute"
  [routeParams]="{ model_id: 1 }"
  [queryParams]="{ page: 1}"
>Link</a>

The intended use of the StrongRoute class, and how we use it for links, is a strongly typed link to a page with route parameters automatically inserted into the path through information already stored in the url. This can be seen in the project/sites/points system in the website, where links often use the StrongRoute value for the page, as the parent model ids are stored in the url of the current page.

Urls

A url, unlike a StrongRoute, is a strongly typed link which already includes the route and query parameters required to be functional. Often, this is used where a model is providing its viewUrl, and the url/page may not contain/know the relevant route or query parameters for the link. Models often take a StrongRoute link to a page, and perform the following to output a url which is navigatable:

public getViewUrl(): string {
  return siteMenuItem.route.format({
    projectId: id(project),
    siteId: this.id,
 });
}

This url can then be added to a link as follows:

<a [bawUrl]="model.getViewUrl()" bawUrlActive="active">Link</a>

Unfortunately, Angulars routing system does not accept query parameters as part of the link, and will sanitize any values out in favour of passing an object containing any wanted query parameters. Because of this we have created the UrlDirective which does accept QSP values, and interprets it in a way which is less cumbersome.