Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
\n"
- },
- {
- "syntax": "Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
\n"
- },
- {
- "syntax": "",
- "bold": [
- "[ngClass]"
- ],
- "description": "
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.
\n"
- }
- ],
- "index": 3
- },
- {
- "name": "Forms",
- "description": "
import { FormsModule } from '@angular/forms';\n
\n",
- "items": [
- {
- "syntax": "
",
- "bold": [
- "[(ngModel)]"
- ],
- "description": "
Provides two-way data-binding, parsing, and validation for form controls.
\n"
- }
- ],
- "index": 4
- },
- {
- "name": "Class decorators",
- "description": "
import { Directive, ... } from '@angular/core';\n
\n",
- "items": [
- {
- "syntax": "@Component({...})\nclass MyComponent() {}",
- "bold": [
- "@Component({...})"
- ],
- "description": "
Declares that a class is a component and provides metadata about the component.
\n"
- },
- {
- "syntax": "@Directive({...})\nclass MyDirective() {}",
- "bold": [
- "@Directive({...})"
- ],
- "description": "
Declares that a class is a directive and provides metadata about the directive.
\n"
- },
- {
- "syntax": "@Pipe({...})\nclass MyPipe() {}",
- "bold": [
- "@Pipe({...})"
- ],
- "description": "
Declares that a class is a pipe and provides metadata about the pipe.
\n"
- },
- {
- "syntax": "@Injectable()\nclass MyService() {}",
- "bold": [
- "@Injectable()"
- ],
- "description": "
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
\n"
- }
- ],
- "index": 5
- },
- {
- "name": "Directive configuration",
- "description": "
@Directive({ property1: value1, ... })\n
\n",
- "items": [
- {
- "syntax": "selector: '.cool-button:not(a)'",
- "bold": [
- "selector:"
- ],
- "description": "
Specifies a CSS selector that identifies this directive within a template. Supported selectors include element,\n[attribute], .class, and :not().
\n
Does not support parent-child relationship selectors.
\n"
- },
- {
- "syntax": "providers: [MyService, { provide: ... }]",
- "bold": [
- "providers:"
- ],
- "description": "
List of dependency injection providers for this directive and its children.
\n"
- }
- ],
- "index": 6
- },
- {
- "name": "Component configuration",
- "description": "
\n@Component extends @Directive,\nso the @Directive configuration applies to components as well
\n",
- "items": [
- {
- "syntax": "moduleId: module.id",
- "bold": [
- "moduleId:"
- ],
- "description": "
If set, the templateUrl and styleUrl are resolved relative to the component.
\n"
- },
- {
- "syntax": "viewProviders: [MyService, { provide: ... }]",
- "bold": [
- "viewProviders:"
- ],
- "description": "
List of dependency injection providers scoped to this component's view.
\n"
- },
- {
- "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
- "bold": [
- "template:",
- "templateUrl:"
- ],
- "description": "
Inline template or external template URL of the component's view.
\n"
- },
- {
- "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
- "bold": [
- "styles:",
- "styleUrls:"
- ],
- "description": "
List of inline CSS styles or external stylesheet URLs for styling the component’s view.
\n"
- }
- ],
- "index": 7
- },
- {
- "name": "Class field decorators for directives and components",
- "description": "
import { Input, ... } from '@angular/core';\n
\n",
- "items": [
- {
- "syntax": "@Input() myProperty;",
- "bold": [
- "@Input()"
- ],
- "description": "
Declares an input property that you can update via property binding (example:\n<my-cmp [myProperty]="someExpression">).
\n"
- },
- {
- "syntax": "@Output() myEvent = new EventEmitter();",
- "bold": [
- "@Output()"
- ],
- "description": "
Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).
\n"
- },
- {
- "syntax": "@HostBinding('class.valid') isValid;",
- "bold": [
- "@HostBinding('class.valid')"
- ],
- "description": "
Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
\n"
- },
- {
- "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
- "bold": [
- "@HostListener('click', ['$event'])"
- ],
- "description": "
Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
\n"
- },
- {
- "syntax": "@ContentChild(myPredicate) myChildComponent;",
- "bold": [
- "@ContentChild(myPredicate)"
- ],
- "description": "
Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
\n"
- },
- {
- "syntax": "@ContentChildren(myPredicate) myChildComponents;",
- "bold": [
- "@ContentChildren(myPredicate)"
- ],
- "description": "
Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
\n"
- },
- {
- "syntax": "@ViewChild(myPredicate) myChildComponent;",
- "bold": [
- "@ViewChild(myPredicate)"
- ],
- "description": "
Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
\n"
- },
- {
- "syntax": "@ViewChildren(myPredicate) myChildComponents;",
- "bold": [
- "@ViewChildren(myPredicate)"
- ],
- "description": "
Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
\n"
- }
- ],
- "index": 8
- },
- {
- "name": "Directive and component change detection and lifecycle hooks",
- "description": "
(implemented as class methods)\n
\n",
- "items": [
- {
- "syntax": "constructor(myService: MyService, ...) { ... }",
- "bold": [
- "constructor(myService: MyService, ...)"
- ],
- "description": "
Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
\n"
- },
- {
- "syntax": "ngOnChanges(changeRecord) { ... }",
- "bold": [
- "ngOnChanges(changeRecord)"
- ],
- "description": "
Called after every change to input properties and before processing content or child views.
\n"
- },
- {
- "syntax": "ngOnInit() { ... }",
- "bold": [
- "ngOnInit()"
- ],
- "description": "
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
\n"
- },
- {
- "syntax": "ngDoCheck() { ... }",
- "bold": [
- "ngDoCheck()"
- ],
- "description": "
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.
\n"
- },
- {
- "syntax": "ngAfterContentInit() { ... }",
- "bold": [
- "ngAfterContentInit()"
- ],
- "description": "
Called after ngOnInit when the component's or directive's content has been initialized.
\n"
- },
- {
- "syntax": "ngAfterContentChecked() { ... }",
- "bold": [
- "ngAfterContentChecked()"
- ],
- "description": "
Called after every check of the component's or directive's content.
\n"
- },
- {
- "syntax": "ngAfterViewInit() { ... }",
- "bold": [
- "ngAfterViewInit()"
- ],
- "description": "
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
\n"
- },
- {
- "syntax": "ngAfterViewChecked() { ... }",
- "bold": [
- "ngAfterViewChecked()"
- ],
- "description": "
Called after every check of the component's view. Applies to components only.
\n"
- },
- {
- "syntax": "ngOnDestroy() { ... }",
- "bold": [
- "ngOnDestroy()"
- ],
- "description": "
Called once, before the instance is destroyed.
\n"
- }
- ],
- "index": 9
- },
- {
- "name": "Dependency injection configuration",
- "description": "",
- "items": [
- {
- "syntax": "{ provide: MyService, useClass: MyMockService }",
- "bold": [
- "provide",
- "useClass"
- ],
- "description": "
Sets or overrides the provider for MyService to the MyMockService class.
\n"
- },
- {
- "syntax": "{ provide: MyService, useFactory: myFactory }",
- "bold": [
- "provide",
- "useFactory"
- ],
- "description": "
Sets or overrides the provider for MyService to the myFactory factory function.
\n"
- },
- {
- "syntax": "{ provide: MyValue, useValue: 41 }",
- "bold": [
- "provide",
- "useValue"
- ],
- "description": "
Sets or overrides the provider for MyValue to the value 41.
\n"
- }
- ],
- "index": 10
- },
- {
- "name": "Routing and navigation",
- "description": "
import { Routes, RouterModule, ... } from '@angular/router';\n
\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": "
Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
\n"
- },
- {
- "syntax": "\n
\n
\n",
- "bold": [
- "router-outlet"
- ],
- "description": "
Marks the location to load the component of the active route.
\n"
- },
- {
- "syntax": "\n
\n\n\n\n\n",
- "bold": [
- "[routerLink]"
- ],
- "description": "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 / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
\n"
- },
- {
- "syntax": "",
- "bold": [],
- "description": "The provided classes are added to the element when the routerLink becomes the current active route.
\n"
- },
- {
- "syntax": "class CanActivateGuard implements CanActivate {\n canActivate(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable|Promise|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
- "bold": [
- "CanActivate"
- ],
- "description": "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.
\n"
- },
- {
- "syntax": "class CanDeactivateGuard implements CanDeactivate {\n canDeactivate(\n component: T,\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable|Promise|boolean { ... }\n}\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
- "bold": [
- "CanDeactivate"
- ],
- "description": "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.
\n"
- },
- {
- "syntax": "class CanActivateChildGuard implements CanActivateChild {\n canActivateChild(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable|Promise|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard],\n children: ... }",
- "bold": [
- "CanActivateChild"
- ],
- "description": "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.
\n"
- },
- {
- "syntax": "class ResolveGuard implements Resolve {\n resolve(\n route: ActivatedRouteSnapshot,\n state: RouterStateSnapshot\n ): Observable|Promise|any { ... }\n}\n\n{ path: ..., resolve: [ResolveGuard] }",
- "bold": [
- "Resolve"
- ],
- "description": "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.
\n"
- },
- {
- "syntax": "class CanLoadGuard implements CanLoad {\n canLoad(\n route: Route\n ): Observable|Promise|boolean { ... }\n}\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
- "bold": [
- "CanLoad"
- ],
- "description": "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.
\n"
- }
- ],
- "index": 11
- }
- ]
+ "sections": []
}
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/security.jade b/public/docs/ts/latest/guide/security.jade
index f94e58ef60..0ae5fec0e9 100644
--- a/public/docs/ts/latest/guide/security.jade
+++ b/public/docs/ts/latest/guide/security.jade
@@ -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 `