ANGULAR2 Series Tutorials (11) Routing nesting, routing life cycle, matrix URL notation

Today we are going to talk about the second part of the NG2 route, including the knowledge points of routing nesting, routing life cycle, and so on.

Example

The example is still an example of the previous lesson:

Last lesson, we explained the Hero list, this lesson we explain the crisis center.

Source:

Https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router

How to run:

Run under the root directory:

Http-server

Routing Nesting

We defined the routing URL and the view component in App/app.component.ts, including one such item:

App/app.component.ts

// Crisis Center Child Route    Path: '/crisis-center/',    ' Crisiscenter ',    component:crisiscentercomponent,      True  },

That one... is to represent this URL can be defined sub-route, that is, nested routines. How is nested routines implemented? Simply configure the route again in the View component:

App/crisis-center/crisis-center.component.ts

Import {Component} from ' Angular2/core '; import {routeconfig, routeroutlet} from' Angular2/router '; import {crisislistcomponent} from'./crisis-list.component '; import {crisisdetailcomponent} from'./crisis-detail.component '; import {Crisisservice} from'./crisis.service '; @Component ({Template: '', directives: [Routeroutlet], providers: [Crisisservice]}) @RouteConfig ([{path:'/', Name: ' Crisislist ', Component:crisislistcomponent, Useasdefault:true}, {path:'/:id ', Name: ' Crisisdetail ', component:crisisdetailcomponent}]) Export class Crisiscentercomponent {}

The above code, we did a few things ":

1. Wrote a component, including H2 and Router-outlet
2. Routing configuration using the @RouteConfig

This allows us to implement nested routines. It's that simple.

Routing life cycle

When a route jumps to another view, it triggers a route's lifecycle hook:routercandeactivate:

App/crisis-center/crisis-detail.component.ts

routercandeactivate (Next:componentinstruction, prev:componentinstruction): any {//Allow synchronous navigation (' true ') if no crisis or the crisis is unchanged.    if(! This. Crisis | | This. Crisis.name = = = This. Editname) {      return true; }    //Otherwise Ask the user with the dialog service and return it    //promise which resolves to true or false when the user decides    return  This. _dialog.confirm (' Discard changes? ')); }

This code, after you have modified the crisis information, neither click Save nor click Cancer when triggered. That is this._dialog.confirm (' Discard changes? ') ); pops up a dialog box:

Why use a separate dialog service here? Why not go directly to window.confirm ()? Because the life cycle of a route accepts a bool or promise object (NG1, too). And Window.confirm does not return a Promise object, we need to wrap it:

App/dialog.service.ts

Import {injectable} from ' Angular2/core ';/** * Async modal Dialog Service * Dialogservice makes this app easier to test by faking the This service. * Todo:better mo Dal implemenation that doesn ' t use window.confirm*/@Injectable () Export class Dialogservice {/** Ask user to confirm a action. ' Message ' explains the action and choices. * Returns promise resolving to ' true ' =confirm or ' false ' =cancel*/Confirm (Message?: String) {    return Newpromise<Boolean> (resolve, reject) =Resolve (window.confirm (message|| ' Is it OK? '))); };}

We used promise to wrap the confirm method so that the service would trigger confirm and finally return a promise. So we can use it in the life cycle of the route!

It is worth mentioning that the resolve attribute of the NG1 route is also accepted by a promise, interested classmates can see me in ng1 in the route modification of Wilddog:

Https://github.com/lewis617/wild-angular-seed/blob/gh-pages/components/wilddog.utils/wilddog.utils.js#L85

matrix URL notation

When we return to the Crisis list view from the crisis detail view, we find that our URL has become: http://localhost:63342/angular2-tutorial/router/index.html/crisis-center/; Id=1;foo=foo

Id=1;foo=foo This parameter is what we have not seen, we know that query string is generally "?" Add "&", and this parameter uses ";", which is called the matrix URL notation.

Matrix URL notation is an idea first floated in a 1996 proposal by the founder of the web, Tim Berners-lee.

Although matrix notation never made it into the HTML standard, it's legal and it became popular among browser routing sys TEMs as a isolate parameters belonging to parent and child routes. The Angular Component Router is such a system.

The syntax seem strange to us but users is unlikely to notice or care as long as the URL can is emailed and pasted in to a browser address bar as this one can.

This is an explanation of the concept in the official document of NG2, and we learn from it that this concept belongs to the parent or child view with the distinguishing parameter.

In our last lesson Heroes list, we found that the URL is a normal query string. Why has this become the matrix URL notation? Because the Hero List view has no child views, there is no concept of nested routines. While the crisis center uses nested routines, with a parent-child view of nesting, in order to add a distinction, NG2 's routing system uses the concept of matrix URL notation.

Tutorial source code and directory

If you feel that this blog tutorial has helped you, take a star!

Https://github.com/lewis617/angular2-tutorial

ANGULAR2 Series Tutorials (11) Routing nesting, routing life cycle, matrix URL notation