Angular Route数据结构里常用字段使用方法一览

简介: Angular Route数据结构里常用字段使用方法一览

本文介绍Route interface里常用字段的使用方法。


image.png


https://angular.io/api/router/Route#description


image.png


path

Can be a wild card (**) that matches any URL (see Usage Notes below). Default is “/” (the root path).

两个星号:代表任意匹配。


image.png


pathMatch

The path-matching strategy, one of ‘prefix’ or ‘full’. Default is ‘prefix’.


By default, the router checks URL elements from the left to see if the URL matches a given path, and stops when there is a match. For example, ‘/team/11/user’ matches ‘team/:id’.


The path-match strategy ‘full’ matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.


默认模式为default,非贪婪匹配。


例子:

const CUSTOM_ROUTES: Routes = [
  { path: "/custom/:id", component: RouteDemoComponent }
];

http://localhost:4200/custom/123


可以工作:


image.png


http://localhost:4200/custom/123/12


测试结果发现,即使使用默认的pathMatch,也会报错,这一点和Angular文档不符。


image.png


component

当path匹配时,该字段指向的Component会被实例化。


The component to instantiate when the path matches. Can be empty if child routes specify components.


outlet

Name of a RouterOutlet object where the component can be placed when the path matches.


canActivate

An array of dependency-injection tokens used to look up CanActivate() handlers, in order to determine if the current user is allowed to activate the component. By default, any user can activate.


data

应用开发人员通过ActivatedRoute接口传入的额外数据。


相关文章
|
7月前
|
存储 前端开发 API
Angular APP_INITIALIZER Injection Token 的使用方法介绍
Angular APP_INITIALIZER Injection Token 的使用方法介绍
22 0
|
7月前
|
设计模式 前端开发 JavaScript
Angular 应用开发中 Injection Token 的使用方法介绍
Angular 应用开发中 Injection Token 的使用方法介绍
52 0
|
API
Angular路由里的resolve接口的使用方法
Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked when the navigation starts. The router waits for the data to be resolved before the route is final
349 0
Angular路由里的resolve接口的使用方法
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
224 0
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
|
API
最简单的Angular Route hello world场景都跑不通的一个原因
最简单的Angular Route hello world场景都跑不通的一个原因
172 0
最简单的Angular Route hello world场景都跑不通的一个原因
Angular ctorParameters,decorator等元数据,包含在ActivatedRouteSnapshot数据结构里
Angular ctorParameters,decorator等元数据,包含在ActivatedRouteSnapshot数据结构里
93 0
Angular ctorParameters,decorator等元数据,包含在ActivatedRouteSnapshot数据结构里
|
测试技术
Angular jasmine单元测试框架spec的运行时数据结构
Angular jasmine单元测试框架spec的运行时数据结构
77 0
Angular jasmine单元测试框架spec的运行时数据结构
|
监控 中间件 API
Angular应用里的@Input和@Output注解使用方法介绍
Angular应用里的@Input和@Output注解使用方法介绍
257 0
Angular应用里的@Input和@Output注解使用方法介绍
|
网络架构
Angular应用内路由(In App Route)的最佳实践
Angular应用内路由(In App Route)的最佳实践
Angular应用内路由(In App Route)的最佳实践