5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
{
|
||
"id": "guide/cheatsheet",
|
||
"title": "Cheat Sheet",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/cheatsheet.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <div class=\"center-layout-wide\">\n<h1 class=\"no-toc\" id=\"cheat-sheet\">Cheat Sheet<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/cheatsheet#cheat-sheet\"><i class=\"material-icons\">link</i></a></h1>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Bootstrapping</th>\n<th><p><code>import { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b><a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule</b>(AppModule);</code></td>\n<td><p>Bootstraps the app, using the root component from the specified <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>. </p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>NgModules</th>\n<th><p><code>import { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code>@<b><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></b>({\n declarations: ..., imports: ..., exports: ...,\n providers: ..., bootstrap: ...\n})\nclass MyModule {}\n</code></td>\n<td><p>Defines a module that contains components, directives, pipes, and providers.</p>\n</td>\n</tr><tr>\n<td><code><b>declarations:</b> [MyRedComponent, MyBlueComponent, MyDatePipe]</code></td>\n<td><p>List of components, directives, and pipes that belong to this module.</p>\n</td>\n</tr><tr>\n<td><code><b>imports:</b> [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>, SomeOtherModule]</code></td>\n<td><p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n</td>\n</tr><tr>\n<td><code><b>exports:</b> [MyRedComponent, MyDatePipe]</code></td>\n<td><p>List of components, directives, and pipes visible to modules that import this module.</p>\n</td>\n</tr><tr>\n<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>\n<td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n</td>\n</tr><tr>\n<td><code><b>entryComponents:</b> [SomeComponent, OtherComponent]</code></td>\n<td><p>List of components not referenced in any reachable template, for example dynamically created from code.</p></td>\n</tr><tr>\n<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>\n<td><p>List of components to bootstrap when this module is bootstrapped.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Template syntax</th>\n<th></th>\n</tr>\n<tr>\n<td><code><input <b>[value]</b>=\"firstName\"></code></td>\n<td><p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n</td>\n</tr><tr>\n<td><code><div <b>[attr.role]</b>=\"myAriaRole\"></code></td>\n<td><p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n</td>\n</tr><tr>\n<td><code><div <b>[class.extra-sparkle]</b>=\"isDelightful\"></code></td>\n<td><p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n</td>\n</tr><tr>\n<td><code><div <b>[style.width.px]</b>=\"mySize\"></code></td>\n<td><p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n</td>\n</tr><tr>\n<td><code><button <b>(click)</b>=\"readRainbow($event)\"></code></td>\n<td><p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n</td>\n</tr><tr>\n<td><code><div title=\"Hello <b>{{ponyName}}</b>\"></code></td>\n<td><p>Binds a property to an interpolated string, for example, \"Hello Seabiscuit\". Equivalent to:\n<code><div [title]=\"'Hello ' + ponyName\"></code></p>\n</td>\n</tr><tr>\n<td><code><p>Hello <b>{{ponyName}}</b></p></code></td>\n<td><p>Binds text content to an interpolated string, for example, \"Hello Seabiscuit\".</p>\n</td>\n</tr><tr>\n<td><code><my-cmp <b>[(title)]</b>=\"name\"></code></td>\n<td><p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]=\"name\" (titleChange)=\"name=$event\"></code></p>\n</td>\n</tr><tr>\n<td><code><video <b>#movieplayer</b> ...></video>\n<button <b>(click)</b>=\"movieplayer.play()\">Play</button>\n</code></td>\n<td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n</td>\n</tr><tr>\n<td><code><p <b>*myUnless</b>=\"myExpression\">...</p></code></td>\n<td><p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code><ng-template [myUnless]=\"myExpression\"><p>...</p></ng-template></code></p>\n</td>\n</tr><tr>\n<td><code><p>Card No.: <b>{{cardNumber | myCardNumberFormatter}}</b></p></code></td>\n<td><p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n</td>\n</tr><tr>\n<td><code><p>Employer: <b>{{employer?.companyName}}</b></p></code></td>\n<td><p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n</td>\n</tr><tr>\n<td><code><<b>svg:</b>rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/></code></td>\n<td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n</td>\n</tr><tr>\n<td><code><<b>svg</b>>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</<b>svg</b>>\n</code></td>\n<td><p>An <code><svg></code> root element is detected as an SVG element automatically, without the prefix.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Built-in directives</th>\n<th><p><code>import { <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> } from '@angular/common';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><section <b>*ngIf</b>=\"showSection\"></code></td>\n<td><p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n</td>\n</tr><tr>\n<td><code><li <b>*ngFor</b>=\"let item of list\"></code></td>\n<td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n</td>\n</tr><tr>\n<td><code><div <b>[<a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a>]</b>=\"conditionExpression\">\n <ng-template <b>[<b>ngSwitchCase</b>]</b>=\"case1Exp\">...</ng-template>\n <ng-template <b>ngSwitchCase</b>=\"case2LiteralString\">...</ng-template>\n <ng-template <b>ngSwitchDefault</b>>...</ng-template>\n</div>\n</code></td>\n<td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>\n</td>\n</tr><tr>\n<td><code><div <b>[ngClass]</b>=\"{'active': isActive, 'disabled': isDisabled}\"></code></td>\n<td><p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p>\n</td>\n</tr>\n<tr>\n<td><code><div <b>[<a href=\"api/common/NgStyle\" class=\"code-anchor\">ngStyle</a>]</b>=\"{'property': 'value'}\">\n<div <b>[ngStyle]</b>=\"dynamicStyles()\">\n</code></td>\n<td><p>Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Forms</th>\n<th><p><code>import { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><input <b>[(ngModel)]</b>=\"userName\"></code></td>\n<td><p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Class decorators</th>\n<th><p><code>import { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, ... } from '@angular/core';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({...})</b>\nclass MyComponent() {}\n</code></td>\n<td><p>Declares that a class is a component and provides metadata about the component.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({...})</b>\nclass MyDirective() {}\n</code></td>\n<td><p>Declares that a class is a directive and provides metadata about the directive.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a>({...})</b>\nclass MyPipe() {}\n</code></td>\n<td><p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()</b>\nclass MyService() {}\n</code></td>\n<td><p>Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Directive configuration</th>\n<th><p><code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({ property1: value1, ... })</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>selector:</b> '.cool-button:not(a)'</code></td>\n<td><p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n</td>\n</tr><tr>\n<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>\n<td><p>List of dependency injection providers for this directive and its children.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Component configuration</th>\n<th><p>\n<code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> extends <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code>,\nso the <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code> configuration applies to components as well</p>\n</th>\n</tr>\n<tr>\n<td><code><b>moduleId:</b> module.id</code></td>\n<td><p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n</td>\n</tr><tr>\n<td><code><b>viewProviders:</b> [MyService, { provide: ... }]</code></td>\n<td><p>List of dependency injection providers scoped to this component's view.</p>\n</td>\n</tr><tr>\n<td><code><b>template:</b> 'Hello {{name}}'\n<b>templateUrl:</b> 'my-component.html'\n</code></td>\n<td><p>Inline template or external template URL of the component's view.</p>\n</td>\n</tr><tr>\n<td><code><b>styles:</b> ['.primary {color: red}']\n<b>styleUrls:</b> ['my-component.css']\n</code></td>\n<td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Class field decorators for directives and components</th>\n<th><p><code>import { <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, ... } from '@angular/core';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</b> myProperty;</code></td>\n<td><p>Declares an input property that you can update via property binding (example:\n<code><my-cmp [myProperty]=\"someExpression\"></code>).</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</b> myEvent = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>();</code></td>\n<td><p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code><my-cmp (myEvent)=\"doSomething()\"></code>).</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/HostBinding\" class=\"code-anchor\">HostBinding</a>('class.valid')</b> isValid;</code></td>\n<td><p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/HostListener\" class=\"code-anchor\">HostListener</a>('click', ['$event'])</b> onClick(e) {...}</code></td>\n<td><p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/ContentChild\" class=\"code-anchor\">ContentChild</a>(myPredicate)</b> myChildComponent;</code></td>\n<td><p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/ContentChildren\" class=\"code-anchor\">ContentChildren</a>(myPredicate)</b> myChildComponents;</code></td>\n<td><p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/ViewChild\" class=\"code-anchor\">ViewChild</a>(myPredicate)</b> myChildComponent;</code></td>\n<td><p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>\n</td>\n</tr><tr>\n<td><code><b>@<a href=\"api/core/ViewChildren\" class=\"code-anchor\">ViewChildren</a>(myPredicate)</b> myChildComponents;</code></td>\n<td><p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Directive and component change detection and lifecycle hooks</th>\n<th><p>(implemented as class methods)\n</p>\n</th>\n</tr>\n<tr>\n<td><code><b>constructor(myService: MyService, ...)</b> { ... }</code></td>\n<td><p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n</td>\n</tr><tr>\n<td><code><b>ngOnChanges(changeRecord)</b> { ... }</code></td>\n<td><p>Called after every change to input properties and before processing content or child views.</p>\n</td>\n</tr><tr>\n<td><code><b>ngOnInit()</b> { ... }</code></td>\n<td><p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n</td>\n</tr><tr>\n<td><code><b>ngDoCheck()</b> { ... }</code></td>\n<td><p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n</td>\n</tr><tr>\n<td><code><b>ngAfterContentInit()</b> { ... }</code></td>\n<td><p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>\n</td>\n</tr><tr>\n<td><code><b>ngAfterContentChecked()</b> { ... }</code></td>\n<td><p>Called after every check of the component's or directive's content.</p>\n</td>\n</tr><tr>\n<td><code><b>ngAfterViewInit()</b> { ... }</code></td>\n<td><p>Called after <code>ngAfterContentInit</code> when the component's views and child views / the view that a directive is in has been initialized.</p>\n</td>\n</tr><tr>\n<td><code><b>ngAfterViewChecked()</b> { ... }</code></td>\n<td><p>Called after every check of the component's views and child views / the view that a directive is in.</p>\n</td>\n</tr><tr>\n<td><code><b>ngOnDestroy()</b> { ... }</code></td>\n<td><p>Called once, before the instance is destroyed.</p>\n</td>\n</tr>\n</tbody></table>\n<table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Dependency injection configuration</th>\n<th></th>\n</tr>\n<tr>\n<td><code>{ <b>provide</b>: MyService, <b>useClass</b>: MyMockService }</code></td>\n<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n</td>\n</tr><tr>\n<td><code>{ <b>provide</b>: MyService, <b>useFactory</b>: myFactory }</code></td>\n<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n</td>\n</tr><tr>\n<td><code>{ <b>provide</b>: MyValue, <b>useValue</b>: 41 }</code></td>\n<td><p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n</td>\n</tr>\n</tbody></table>\n<p></p><p></p><p></p><p></p><p></p><p></p><table class=\"is-full-width is-fixed-layout\">\n<tbody><tr>\n<th>Routing and navigation</th>\n<th><p><code>import { <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a>, <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>, ... } from '@angular/router';</code>\n</p>\n</th>\n</tr>\n<tr>\n<td><code>const routes: <b>Routes</b> = [\n { path: '', component: HomeComponent },\n { path: 'path/:routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n</code><p><code>const routing = RouterModule.forRoot(routes);\n</code></p></td>\n<td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n</td>\n</tr><tr>\n<td><code><<b><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a></b>></<b><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a></b>>\n<<b><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a></b> name=\"aux\"></<b>router-outlet</b>>\n</code></td>\n<td><p>Marks the location to load the component of the active route.</p>\n</td>\n</tr><tr>\n<td><code><<a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">a</a> <b><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></b>=\"/path\">\n<<a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">a</a> <b>[<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]</b>=\"[ '/path', routeParam ]\">\n<a <b>[routerLink]</b>=\"[ '/path', { matrixParam: 'value' } ]\">\n<a <b>[routerLink]</b>=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a <b>[routerLink]</b>=\"[ '/path' ]\" fragment=\"anchor\">\n</code></td>\n<td><p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n</td>\n</tr><tr>\n<td><code><<a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">a</a> [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"[ '/path' ]\" <b>routerLinkActive</b>=\"active\"></code></td>\n<td><p>The provided classes are added to the element when the <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code> becomes the current active route.</p>\n</td>\n</tr><tr>\n<td><code>class <b><a href=\"api/router/CanActivate\" class=\"code-anchor\">CanActivate</a></b>Guard implements <b>CanActivate</b> {\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }\n}\n</code><p><code>{ path: ..., canActivate: [<b>CanActivate</b>Guard] }\n</code></p></td>\n<td><p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>\n</td>\n</tr><tr>\n<td><code>class <b><a href=\"api/router/CanDeactivate\" class=\"code-anchor\">CanDeactivate</a></b>Guard implements <b>CanDeactivate</b><T> {\n canDeactivate(\n component: T,\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }\n}\n</code><p><code>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }\n</code></p></td>\n<td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>\n</td>\n</tr><tr>\n<td><code>class <b><a href=\"api/router/CanActivateChild\" class=\"code-anchor\">CanActivateChild</a></b>Guard implements <b>CanActivateChild</b> {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }\n}\n</code><p><code>{ path: ..., canActivateChild: [CanActivateGuard],\nchildren: ... }\n</code></p></td>\n<td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>\n</td>\n</tr><tr>\n<td><code>class <b><a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a></b>Guard implements <b>Resolve</b><T> {\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<any>|Promise<any>|any { ... }\n}\n</code><p><code>{ path: ..., resolve: [<b>Resolve</b>Guard] }\n</code></p></td>\n<td><p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>\n</td>\n</tr><tr>\n<td><code>class <b><a href=\"api/router/CanLoad\" class=\"code-anchor\">CanLoad</a></b>Guard implements <b>CanLoad</b> {\n canLoad(\n route: Route\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }\n}\n</code><p><code>{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }\n</code></p></td>\n<td><p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree.</p>\n</td>\n</tr>\n</tbody></table>\n</div>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/common/CommonModule\n - api/common/NgStyle\n - api/common/NgSwitch\n - api/core/Component\n - api/core/ContentChild\n - api/core/ContentChildren\n - api/core/Directive\n - api/core/EventEmitter\n - api/core/HostBinding\n - api/core/HostListener\n - api/core/Injectable\n - api/core/Input\n - api/core/NgModule\n - api/core/Output\n - api/core/Pipe\n - api/core/ViewChild\n - api/core/ViewChildren\n - api/forms/FormsModule\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - api/router/CanActivate\n - api/router/CanActivateChild\n - api/router/CanDeactivate\n - api/router/CanLoad\n - api/router/Resolve\n - api/router/RouterLink\n - api/router/RouterLinkWithHref\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/Routes\n - guide/cheatsheet#cheat-sheet\n - https://github.com/angular/angular/edit/master/aio/content/guide/cheatsheet.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |