填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

RouterLink

When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet> locations on the page.

查看"说明"...

NgModule

选择器

属性

属性说明
@Input()
queryParams?: Params | null

Passed to Router#createUrlTree as part of the UrlCreationOptions.

参见:

@Input()
fragment?: string

Passed to Router#createUrlTree as part of the UrlCreationOptions.

参见:

@Input()
queryParamsHandling?: QueryParamsHandling | null

Passed to Router#createUrlTree as part of the UrlCreationOptions.

参见:

@Input()
preserveFragment: boolean

Passed to Router#createUrlTree as part of the UrlCreationOptions.

参见:

@Input()
skipLocationChange: boolean

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

参见:

@Input()
replaceUrl: boolean

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

参见:

@Input()
state?: { [k: string]: any; }

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

参见:

@Input()
routerLink: string | any[]
Write-only.

Commands to pass to Router#createUrlTree.

  • array: commands to pass to Router#createUrlTree.
  • string: shorthand for array of commands with just the string, i.e. ['/route']
  • null|undefined: shorthand for an empty array of commands, i.e. []

参见:

urlTree: UrlTree只读

说明

Given a route configuration [{ path: 'user/:name', component: UserCmp }], the following creates a static link to the route: <a routerLink="/user/bob">link to user component</a>

You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

Multiple static segments can be merged into one term and combined with dynamic segements. For example, ['/team/11/user', userName, {details: true}]

The input that you provide to the link is treated as a delta to the current URL. For instance, suppose the current URL is /user/(box//aux:team). The link <a [routerLink]="['/user/jim']">Jim</a> creates the URL /user/(jim//aux:team). See createUrlTree for more information.

You can use absolute or relative paths in a link, set query parameters, control how parameters are handled, and keep a history of navigation states.

The first segment name can be prepended with /, ./, or ../.

  • 如果第一个片段用 / 开头,则路由器会从应用的根路由开始查找。

    If the first segment begins with /, the router looks up the route from the root of the app.

  • 如果第一个片段用 ./ 开头或者没有用斜杠开头,路由器就会从当前激活路由开始查找。

    If the first segment begins with ./, or doesn't begin with a slash, the router looks in the children of the current activated route.

  • If the first segment begins with ../, the router goes up one level in the route tree.

Setting and handling query params and fragments

The following link adds a query parameter and a fragment to the generated URL:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>
    

By default, the directive constructs the new URL using the given query parameters. The example generates the link: /user/bob?debug=true#education.

You can instruct the directive to handle query parameters differently by specifying the queryParamsHandling option in the link. Allowed values are:

  • 'merge': Merge the given queryParams into the current query params.
  • 'preserve': Preserve the current query params.

For example:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component
</a>
    

See UrlCreationOptions#queryParamsHandling.

Preserving navigation history

You can provide a state value to be persisted to the browser's History.state property. For example:

<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
  link to user component
</a>
    

Use Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the tracingId during the NavigationStart event:

// Get NavigationStart events router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => { const navigation = router.getCurrentNavigation(); tracingService.trace({id: navigation.extras.state.tracingId}); });
      
      // Get NavigationStart events
router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.getCurrentNavigation();
  tracingService.trace({id: navigation.extras.state.tracingId});
});