修订完security
This commit is contained in:
Zhicheng Wang
parent
0ce88ece13
commit
70e77a29ef
|
|
@ -1,573 +1,20 @@
|
|||
{
|
||||
"currentEnvironment": "JavaScript",
|
||||
"version": {
|
||||
"raw": "2.4.5",
|
||||
"major": 2,
|
||||
"minor": 4,
|
||||
"patch": 6,
|
||||
"raw": "4.0.0-beta.5",
|
||||
"major": 4,
|
||||
"minor": 0,
|
||||
"patch": 0,
|
||||
"prerelease": [
|
||||
"local"
|
||||
],
|
||||
"build": "sha.6af595d",
|
||||
"version": "2.4.6-local",
|
||||
"build": "sha.0ce88ec",
|
||||
"version": "4.0.0-local",
|
||||
"codeName": "snapshot",
|
||||
"isSnapshot": true,
|
||||
"full": "2.4.6-local+sha.6af595d",
|
||||
"full": "4.0.0-local+sha.0ce88ec",
|
||||
"branch": "master",
|
||||
"commitSHA": "6af595d7bd46d8fd0e44d6fd1c9719dff58464ff"
|
||||
"commitSHA": "0ce88ece13bbfe82dc0b19b6608dab206ea9800b"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "Bootstrapping",
|
||||
"description": "<p>\nAvailable from the <code>ng.platformBrowserDynamic</code> namespace</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "document.addEventListener('DOMContentLoaded', function() {\n ng.platformBrowserDynamic\n .platformBrowserDynamic()\n .bootstrapModule(app.AppModule);\n});",
|
||||
"bold": [
|
||||
"platformBrowserDynamic().bootstrapModule"
|
||||
],
|
||||
"description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. Must be wrapped in the event listener to fire when the page loads.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"name": "NgModules",
|
||||
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "ng.core.NgModule({declarations: ..., imports: ...,\n exports: ..., providers: ..., bootstrap: ...}).\nClass({ constructor: function() {}})",
|
||||
"bold": [],
|
||||
"description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
|
||||
"bold": [
|
||||
"declarations:"
|
||||
],
|
||||
"description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]",
|
||||
"bold": [
|
||||
"imports:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "exports: [MyRedComponent, MyDatePipe]",
|
||||
"bold": [
|
||||
"exports:"
|
||||
],
|
||||
"description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "bootstrap: [MyAppComponent]",
|
||||
"bold": [
|
||||
"bootstrap:"
|
||||
],
|
||||
"description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 1
|
||||
},
|
||||
{
|
||||
"name": "Template syntax",
|
||||
"description": "",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [value]=\"firstName\">",
|
||||
"bold": [
|
||||
"[value]"
|
||||
],
|
||||
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||
"bold": [
|
||||
"[attr.role]"
|
||||
],
|
||||
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||
"bold": [
|
||||
"[class.extra-sparkle]"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||
"bold": [
|
||||
"[style.width.px]"
|
||||
],
|
||||
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||
"bold": [
|
||||
"(click)"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello ' + ponyName"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||
"bold": [
|
||||
"[(title)]"
|
||||
],
|
||||
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||
"bold": [
|
||||
"#movieplayer",
|
||||
"(click)"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<p *myUnless=\"myExpression\">...</p>",
|
||||
"bold": [
|
||||
"*myUnless"
|
||||
],
|
||||
"description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code><template [myUnless]="myExpression"><p>...</p></template></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
|
||||
"bold": [
|
||||
"{{cardNumber | myCardNumberFormatter}}"
|
||||
],
|
||||
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||
"bold": [
|
||||
"{{employer?.companyName}}"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
|
||||
"bold": [
|
||||
"svg:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
|
||||
"bold": [
|
||||
"svg"
|
||||
],
|
||||
"description": "<p>An <code><svg></code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 2
|
||||
},
|
||||
{
|
||||
"name": "Built-in directives",
|
||||
"description": "<p>\nAvailable using the <code>ng.common.CommonModule</code> module</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<section *ngIf=\"showSection\">",
|
||||
"bold": [
|
||||
"*ngIf"
|
||||
],
|
||||
"description": "<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<li *ngFor=\"let item of list\">",
|
||||
"bold": [
|
||||
"*ngFor"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchCase]=\"case1Exp\">...</template>\n <template ngSwitchCase=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||
"bold": [
|
||||
"[ngSwitch]",
|
||||
"[ngSwitchCase]",
|
||||
"ngSwitchCase",
|
||||
"ngSwitchDefault"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||
"bold": [
|
||||
"[ngClass]"
|
||||
],
|
||||
"description": "<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"
|
||||
}
|
||||
],
|
||||
"index": 3
|
||||
},
|
||||
{
|
||||
"name": "Forms",
|
||||
"description": "<p>\nAvailable using the <code>ng.forms.FormsModule</code> module</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||
"bold": [
|
||||
"[(ngModel)]"
|
||||
],
|
||||
"description": "<p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 4
|
||||
},
|
||||
{
|
||||
"name": "Class decorators",
|
||||
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "var MyComponent = ng.core.Component({...}).Class({...})",
|
||||
"bold": [
|
||||
"ng.core.Component({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var MyDirective = ng.core.Directive({...}).Class({...})",
|
||||
"bold": [
|
||||
"ng.core.Directive({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a directive and provides metadata about the directive.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var MyPipe = ng.core.Pipe({...}).Class({...})",
|
||||
"bold": [
|
||||
"ng.core.Pipe({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var OtherService = ng.core.Class(\n {constructor: function() { }});\nvar MyService = ng.core.Class(\n {constructor: [OtherService, function(otherService) { }]});",
|
||||
"bold": [
|
||||
"var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});"
|
||||
],
|
||||
"description": "<p>\n\nDeclares a service to inject into a class by providing an array with the services, with the final item being the function to receive the injected services.\n</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 5
|
||||
},
|
||||
{
|
||||
"name": "Directive configuration",
|
||||
"description": "<p>\n<code>ng.core.Directive({ property1: value1, ... }).Class({...})</code></p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "selector: '.cool-button:not(a)'",
|
||||
"bold": [
|
||||
"selector:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers for this directive and its children.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 6
|
||||
},
|
||||
{
|
||||
"name": "Component configuration",
|
||||
"description": "<p><code>ng.core.Component</code> extends <code>ng.core.Directive</code>,\nso the <code>ng.core.Directive</code> configuration applies to components as well\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "moduleId: module.id",
|
||||
"bold": [
|
||||
"moduleId:"
|
||||
],
|
||||
"description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "viewProviders: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"viewProviders:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers scoped to this component's view.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||
"bold": [
|
||||
"template:",
|
||||
"templateUrl:"
|
||||
],
|
||||
"description": "<p>Inline template or external template URL of the component's view.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||
"bold": [
|
||||
"styles:",
|
||||
"styleUrls:"
|
||||
],
|
||||
"description": "<p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 7
|
||||
},
|
||||
{
|
||||
"name": "Class field decorators for directives and components",
|
||||
"description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "ng.core.Input(myProperty, myComponent);",
|
||||
"bold": [
|
||||
"ng.core.Input(",
|
||||
");"
|
||||
],
|
||||
"description": "<p>Declares an input property that you can update via property binding (example:\n<code><my-cmp [myProperty]="someExpression"></code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "myEvent = new ng.core.EventEmitter();\nng.core.Output(myEvent, myComponent);",
|
||||
"bold": [
|
||||
"ng.core.Output(",
|
||||
");"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.HostBinding('class.valid',\n 'isValid', myComponent);",
|
||||
"bold": [
|
||||
"ng.core.HostBinding('class.valid', 'isValid'",
|
||||
");"
|
||||
],
|
||||
"description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.HostListener('click',\n ['$event'], onClick(e) {...}, myComponent);",
|
||||
"bold": [
|
||||
"ng.core.HostListener('click', ['$event'], onClick(e)",
|
||||
");"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.ContentChild(myPredicate,\n 'myChildComponent', myComponent);",
|
||||
"bold": [
|
||||
"ng.core.ContentChild(myPredicate,",
|
||||
");"
|
||||
],
|
||||
"description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.ContentChildren(myPredicate,\n 'myChildComponents', myComponent);",
|
||||
"bold": [
|
||||
"ng.core.ContentChildren(myPredicate,",
|
||||
");"
|
||||
],
|
||||
"description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.ViewChild(myPredicate,\n 'myChildComponent', myComponent);",
|
||||
"bold": [
|
||||
"ng.core.ViewChild(myPredicate,",
|
||||
");"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "ng.core.ViewChildren(myPredicate,\n 'myChildComponents', myComponent);",
|
||||
"bold": [
|
||||
"ng.core.ViewChildren(myPredicate,",
|
||||
");"
|
||||
],
|
||||
"description": "<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"
|
||||
}
|
||||
],
|
||||
"index": 8
|
||||
},
|
||||
{
|
||||
"name": "Directive and component change detection and lifecycle hooks",
|
||||
"description": "<p>\n(implemented as component properties)</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "constructor: function(MyService, ...) { ... }",
|
||||
"bold": [
|
||||
"constructor: function(MyService, ...)"
|
||||
],
|
||||
"description": "<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnChanges: function(changeRecord) { ... }",
|
||||
"bold": [
|
||||
"ngOnChanges: function(changeRecord)"
|
||||
],
|
||||
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnInit: function() { ... }",
|
||||
"bold": [
|
||||
"ngOnInit: function()"
|
||||
],
|
||||
"description": "<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngDoCheck: function() { ... }",
|
||||
"bold": [
|
||||
"ngDoCheck: function()"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentInit: function() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentInit: function()"
|
||||
],
|
||||
"description": "<p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentChecked: function() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentChecked: function()"
|
||||
],
|
||||
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewInit: function() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewInit: function()"
|
||||
],
|
||||
"description": "<p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewChecked: function() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewChecked: function()"
|
||||
],
|
||||
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnDestroy: function() { ... }",
|
||||
"bold": [
|
||||
"ngOnDestroy: function()"
|
||||
],
|
||||
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 9
|
||||
},
|
||||
{
|
||||
"name": "Dependency injection configuration",
|
||||
"description": "",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "{ provide: MyService, useClass: MyMockService }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useClass"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "{ provide: MyService, useFactory: myFactory }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useFactory"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "{ provide: MyValue, useValue: 41 }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useValue"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 10
|
||||
},
|
||||
{
|
||||
"name": "Routing and navigation",
|
||||
"description": "<p>\nAvailable from the <code>ng.router</code> namespace</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "var routes = [\n { path: '', component: HomeComponent },\n { path: ':routeParam', component: MyComponent },\n { path: 'staticPath', component: ... },\n { path: '**', component: ... },\n { path: 'oldPath', redirectTo: '/staticPath' },\n { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nvar routing = ng.router.RouterModule.forRoot(routes);",
|
||||
"bold": [
|
||||
"ng.router.Routes"
|
||||
],
|
||||
"description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
|
||||
"bold": [
|
||||
"router-outlet"
|
||||
],
|
||||
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
|
||||
"bold": [
|
||||
"[routerLink]"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
|
||||
"bold": [],
|
||||
"description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var CanActivateGuard = ng.core.Class({\n canActivate: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivate: [CanActivateGuard] }",
|
||||
"bold": [
|
||||
"CanActivate"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var CanDeactivateGuard = ng.core.Class({\n canDeactivate: function(component, route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
|
||||
"bold": [
|
||||
"CanDeactivate"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var CanActivateChildGuard = ng.core.Class({\n canActivateChild: function(route, state) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canActivateChild: [CanActivateChildGuard],\n children: ... }",
|
||||
"bold": [
|
||||
"CanActivateChild"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "var ResolveGuard = ng.core.Class({\n resolve: function(route, state) {\n // return Observable/Promise value or value\n }\n});\n\n{ path: ..., resolve: [ResolveGuard] }",
|
||||
"bold": [
|
||||
"Resolve"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "var CanLoadGuard = ng.core.Class({\n canLoad: function(route) {\n // return Observable/Promise boolean or boolean\n }\n});\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
|
||||
"bold": [
|
||||
"CanLoad"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 11
|
||||
}
|
||||
]
|
||||
"sections": []
|
||||
}
|
||||
|
|
@ -1,567 +1,20 @@
|
|||
{
|
||||
"currentEnvironment": "TypeScript",
|
||||
"version": {
|
||||
"raw": "2.4.5",
|
||||
"major": 2,
|
||||
"minor": 4,
|
||||
"patch": 6,
|
||||
"raw": "4.0.0-beta.5",
|
||||
"major": 4,
|
||||
"minor": 0,
|
||||
"patch": 0,
|
||||
"prerelease": [
|
||||
"local"
|
||||
],
|
||||
"build": "sha.6af595d",
|
||||
"version": "2.4.6-local",
|
||||
"build": "sha.0ce88ec",
|
||||
"version": "4.0.0-local",
|
||||
"codeName": "snapshot",
|
||||
"isSnapshot": true,
|
||||
"full": "2.4.6-local+sha.6af595d",
|
||||
"full": "4.0.0-local+sha.0ce88ec",
|
||||
"branch": "master",
|
||||
"commitSHA": "6af595d7bd46d8fd0e44d6fd1c9719dff58464ff"
|
||||
"commitSHA": "0ce88ece13bbfe82dc0b19b6608dab206ea9800b"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "Bootstrapping",
|
||||
"description": "<p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "platformBrowserDynamic().bootstrapModule(AppModule);",
|
||||
"bold": [
|
||||
"platformBrowserDynamic().bootstrapModule"
|
||||
],
|
||||
"description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n"
|
||||
}
|
||||
],
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"name": "NgModules",
|
||||
"description": "<p><code>import { NgModule } from '@angular/core';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@NgModule({ declarations: ..., imports: ...,\n exports: ..., providers: ..., bootstrap: ...})\nclass MyModule {}",
|
||||
"bold": [
|
||||
"NgModule"
|
||||
],
|
||||
"description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
|
||||
"bold": [
|
||||
"declarations:"
|
||||
],
|
||||
"description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "imports: [BrowserModule, SomeOtherModule]",
|
||||
"bold": [
|
||||
"imports:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "exports: [MyRedComponent, MyDatePipe]",
|
||||
"bold": [
|
||||
"exports:"
|
||||
],
|
||||
"description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "bootstrap: [MyAppComponent]",
|
||||
"bold": [
|
||||
"bootstrap:"
|
||||
],
|
||||
"description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 1
|
||||
},
|
||||
{
|
||||
"name": "Template syntax",
|
||||
"description": "",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [value]=\"firstName\">",
|
||||
"bold": [
|
||||
"[value]"
|
||||
],
|
||||
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||
"bold": [
|
||||
"[attr.role]"
|
||||
],
|
||||
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||
"bold": [
|
||||
"[class.extra-sparkle]"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||
"bold": [
|
||||
"[style.width.px]"
|
||||
],
|
||||
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||
"bold": [
|
||||
"(click)"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello ' + ponyName"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||
"bold": [
|
||||
"[(title)]"
|
||||
],
|
||||
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||
"bold": [
|
||||
"#movieplayer",
|
||||
"(click)"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<p *myUnless=\"myExpression\">...</p>",
|
||||
"bold": [
|
||||
"*myUnless"
|
||||
],
|
||||
"description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code><template [myUnless]="myExpression"><p>...</p></template></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
|
||||
"bold": [
|
||||
"{{cardNumber | myCardNumberFormatter}}"
|
||||
],
|
||||
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||
"bold": [
|
||||
"{{employer?.companyName}}"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
|
||||
"bold": [
|
||||
"svg:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
|
||||
"bold": [
|
||||
"svg"
|
||||
],
|
||||
"description": "<p>An <code><svg></code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 2
|
||||
},
|
||||
{
|
||||
"name": "Built-in directives",
|
||||
"description": "<p><code>import { CommonModule } from '@angular/common';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<section *ngIf=\"showSection\">",
|
||||
"bold": [
|
||||
"*ngIf"
|
||||
],
|
||||
"description": "<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<li *ngFor=\"let item of list\">",
|
||||
"bold": [
|
||||
"*ngFor"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchCase]=\"case1Exp\">...</template>\n <template ngSwitchCase=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||
"bold": [
|
||||
"[ngSwitch]",
|
||||
"[ngSwitchCase]",
|
||||
"ngSwitchCase",
|
||||
"ngSwitchDefault"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||
"bold": [
|
||||
"[ngClass]"
|
||||
],
|
||||
"description": "<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"
|
||||
}
|
||||
],
|
||||
"index": 3
|
||||
},
|
||||
{
|
||||
"name": "Forms",
|
||||
"description": "<p><code>import { FormsModule } from '@angular/forms';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||
"bold": [
|
||||
"[(ngModel)]"
|
||||
],
|
||||
"description": "<p>Provides two-way data-binding, parsing, and validation for form controls.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 4
|
||||
},
|
||||
{
|
||||
"name": "Class decorators",
|
||||
"description": "<p><code>import { Directive, ... } from '@angular/core';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Component({...})\nclass MyComponent() {}",
|
||||
"bold": [
|
||||
"@Component({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Directive({...})\nclass MyDirective() {}",
|
||||
"bold": [
|
||||
"@Directive({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a directive and provides metadata about the directive.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
||||
"bold": [
|
||||
"@Pipe({...})"
|
||||
],
|
||||
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Injectable()\nclass MyService() {}",
|
||||
"bold": [
|
||||
"@Injectable()"
|
||||
],
|
||||
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 5
|
||||
},
|
||||
{
|
||||
"name": "Directive configuration",
|
||||
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "selector: '.cool-button:not(a)'",
|
||||
"bold": [
|
||||
"selector:"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers for this directive and its children.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 6
|
||||
},
|
||||
{
|
||||
"name": "Component configuration",
|
||||
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "moduleId: module.id",
|
||||
"bold": [
|
||||
"moduleId:"
|
||||
],
|
||||
"description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "viewProviders: [MyService, { provide: ... }]",
|
||||
"bold": [
|
||||
"viewProviders:"
|
||||
],
|
||||
"description": "<p>List of dependency injection providers scoped to this component's view.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||
"bold": [
|
||||
"template:",
|
||||
"templateUrl:"
|
||||
],
|
||||
"description": "<p>Inline template or external template URL of the component's view.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||
"bold": [
|
||||
"styles:",
|
||||
"styleUrls:"
|
||||
],
|
||||
"description": "<p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 7
|
||||
},
|
||||
{
|
||||
"name": "Class field decorators for directives and components",
|
||||
"description": "<p><code>import { Input, ... } from '@angular/core';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Input() myProperty;",
|
||||
"bold": [
|
||||
"@Input()"
|
||||
],
|
||||
"description": "<p>Declares an input property that you can update via property binding (example:\n<code><my-cmp [myProperty]="someExpression"></code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Output() myEvent = new EventEmitter();",
|
||||
"bold": [
|
||||
"@Output()"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "@HostBinding('class.valid') isValid;",
|
||||
"bold": [
|
||||
"@HostBinding('class.valid')"
|
||||
],
|
||||
"description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
||||
"bold": [
|
||||
"@HostListener('click', ['$event'])"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
||||
"bold": [
|
||||
"@ContentChild(myPredicate)"
|
||||
],
|
||||
"description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
||||
"bold": [
|
||||
"@ContentChildren(myPredicate)"
|
||||
],
|
||||
"description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
||||
"bold": [
|
||||
"@ViewChild(myPredicate)"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
||||
"bold": [
|
||||
"@ViewChildren(myPredicate)"
|
||||
],
|
||||
"description": "<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"
|
||||
}
|
||||
],
|
||||
"index": 8
|
||||
},
|
||||
{
|
||||
"name": "Directive and component change detection and lifecycle hooks",
|
||||
"description": "<p>(implemented as class methods)\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "constructor(myService: MyService, ...) { ... }",
|
||||
"bold": [
|
||||
"constructor(myService: MyService, ...)"
|
||||
],
|
||||
"description": "<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||
"bold": [
|
||||
"ngOnChanges(changeRecord)"
|
||||
],
|
||||
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnInit() { ... }",
|
||||
"bold": [
|
||||
"ngOnInit()"
|
||||
],
|
||||
"description": "<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngDoCheck() { ... }",
|
||||
"bold": [
|
||||
"ngDoCheck()"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentInit() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentInit()"
|
||||
],
|
||||
"description": "<p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentChecked() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentChecked()"
|
||||
],
|
||||
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewInit() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewInit()"
|
||||
],
|
||||
"description": "<p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewChecked() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewChecked()"
|
||||
],
|
||||
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnDestroy() { ... }",
|
||||
"bold": [
|
||||
"ngOnDestroy()"
|
||||
],
|
||||
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 9
|
||||
},
|
||||
{
|
||||
"name": "Dependency injection configuration",
|
||||
"description": "",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "{ provide: MyService, useClass: MyMockService }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useClass"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "{ provide: MyService, useFactory: myFactory }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useFactory"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "{ provide: MyValue, useValue: 41 }",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useValue"
|
||||
],
|
||||
"description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 10
|
||||
},
|
||||
{
|
||||
"name": "Routing and navigation",
|
||||
"description": "<p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "const routes: Routes = [\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\nconst routing = RouterModule.forRoot(routes);",
|
||||
"bold": [
|
||||
"Routes"
|
||||
],
|
||||
"description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
|
||||
"bold": [
|
||||
"router-outlet"
|
||||
],
|
||||
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
|
||||
"bold": [
|
||||
"[routerLink]"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
|
||||
"bold": [],
|
||||
"description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "class CanActivateGuard implements CanActivate {\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
|
||||
"bold": [
|
||||
"CanActivate"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "class CanDeactivateGuard implements CanDeactivate<T> {\n canDeactivate(\n component: T,\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
|
||||
"bold": [
|
||||
"CanDeactivate"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "class CanActivateChildGuard implements CanActivateChild {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard],\n children: ... }",
|
||||
"bold": [
|
||||
"CanActivateChild"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "class ResolveGuard implements Resolve<T> {\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable<any>|Promise<any>|any { ... }\n}\n\n{ path: ..., resolve: [ResolveGuard] }",
|
||||
"bold": [
|
||||
"Resolve"
|
||||
],
|
||||
"description": "<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"
|
||||
},
|
||||
{
|
||||
"syntax": "class CanLoadGuard implements CanLoad {\n canLoad(\n route: Route\n ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
|
||||
"bold": [
|
||||
"CanLoad"
|
||||
],
|
||||
"description": "<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 or an Observable/Promise that resolves to a boolean.</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 11
|
||||
}
|
||||
]
|
||||
"sections": []
|
||||
}
|
||||
|
|
@ -88,7 +88,8 @@ h2#best-practices
|
|||
* **Avoid Angular APIs marked in the documentation as “_Security Risk_.”**
|
||||
For more information, see the [Trusting safe values](#bypass-security-apis) section of this page.
|
||||
|
||||
**避免使用本文档中带“[_安全风险_](#bypass-security-apis)”标记的Angular API。**
|
||||
**避免使用本文档中带“[_安全风险_](#bypass-security-apis)”标记的Angular API。**
|
||||
要了解更多信息，请参阅本章的[信任那些安全的值](#bypass-security-apis)部分。
|
||||
|
||||
.l-main-section
|
||||
h2#xss
|
||||
|
|
@ -204,9 +205,12 @@ h2#xss
|
|||
Angular recognizes the value as unsafe and automatically sanitizes it, which removes the `<script>`
|
||||
tag but keeps safe content such as the text content of the `<script>` tag and the `<b>` element.
|
||||
|
||||
Angular认为这些值是不安全的，并自动进行无害化处理。它会移除`<script>`标签，但保留安全的内容，比如该片段中的文本内容或`<b>`元素。figure.image-display
|
||||
img(src='/resources/images/devguide/security/binding-inner-html.png'
|
||||
alt='A screenshot showing interpolated and bound HTML values')
|
||||
Angular认为这些值是不安全的，并自动进行无害化处理。它会移除`<script>`标签，但保留安全的内容，比如该片段中的文本内容或`<b>`元素。
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/security/binding-inner-html.png'
|
||||
alt='A screenshot showing interpolated and bound HTML values')
|
||||
|
||||
:marked
|
||||
### Avoid direct use of the DOM APIs
|
||||
|
||||
|
|
@ -233,6 +237,7 @@ h2#xss
|
|||
[内容安全策略(CSP)](https://developer.mozilla.org/en-
|
||||
US/docs/Web/Security/CSP/Introducing_Content_Security_Policy)是用来防范XSS的纵深防御技术。
|
||||
要打开CSP，请配置你的Web服务器，让它返回合适的HTTP头`Content_Security_Policy`。
|
||||
要了解关于内容安全策略的更多信息，请参阅HTML5Rocks上的[内容安全策略简介](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
|
||||
|
||||
a#offline-template-compiler
|
||||
:marked
|
||||
|
|
|
|||
Loading…
Reference in New Issue