Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Say hello to Angular's future home!Check out Angular.devHome
/

UrlTree

Represents the parsed URL.

See more...

      
      class UrlTree {
  constructor(root: UrlSegmentGroup = new UrlSegmentGroup([], {}), queryParams: Params = {}, fragment: string = null)
  root: UrlSegmentGroup
  queryParams: Params
  fragment: string | null
  queryParamMap: ParamMap
  toString(): string
}
    

Description

Since a router state is a tree, and the URL is nothing but a serialized state, the URL is a serialized tree. UrlTree is a data structure that provides a lot of affordances in dealing with URLs

Further information is available in the Usage Notes...

Constructor

      
      constructor(root: UrlSegmentGroup = new UrlSegmentGroup([], {}), queryParams: Params = {}, fragment: string = null)
    
Parameters
root UrlSegmentGroup

The root segment group of the URL tree

Optional. Default is new UrlSegmentGroup([], {}).

queryParams Params

The query params of the URL

Optional. Default is {}.

fragment string

The fragment of the URL

Optional. Default is null.

Properties

Property Description
root: UrlSegmentGroup Declared in Constructor

The root segment group of the URL tree

queryParams: Params Declared in Constructor

The query params of the URL

fragment: string | null Declared in Constructor

The fragment of the URL

queryParamMap: ParamMap Read-Only

Methods

      
      toString(): string
    
Parameters

There are no parameters.

Returns

string

Usage notes

Example

      
      @Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const tree: UrlTree =
      router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
    const f = tree.fragment; // return 'fragment'
    const q = tree.queryParams; // returns {debug: 'true'}
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
    g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
    g.children['support'].segments; // return 1 segment 'help'
  }
}