天天看點

Angular Route資料結構裡常用字段使用方法一覽

本文介紹Route interface裡常用字段的使用方法。

Angular Route資料結構裡常用字段使用方法一覽
https://angular.io/api/router/Route#description
Angular Route資料結構裡常用字段使用方法一覽

path

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

兩個星号:代表任意比對。

Angular Route資料結構裡常用字段使用方法一覽

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

可以工作:

Angular Route資料結構裡常用字段使用方法一覽

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

測試結果發現,即使使用預設的pathMatch,也會報錯,這一點和Angular文檔不符。

Angular Route資料結構裡常用字段使用方法一覽

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接口傳入的額外資料。

繼續閱讀