iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: edit $any() section and add example in Template Syntax (#28157)

Browse Source 
PR Close #28157
This commit is contained in:
Kapunahele Wong 2019-01-14 13:56:28 -05:00 committed by Matias Niemelä
parent a9020a028f
commit c0ad9e104d
12 changed files with 135 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,20 @@
'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
describe('Built Template Functions Example', function () {
beforeAll(function () {
browser.get('');
});
it('should have title Built-in Template Functions', function () {
let title = element.all(by.css('h1')).get(0);
expect(title.getText()).toEqual('Built-in Template Functions');
});
it('should display $any( ) in h2', function () {
let header = element(by.css('h2'));
expect(header.getText()).toContain('$any( )');
});
});

0
aio/content/examples/built-in-template-functions/example-config.json Normal file
View File

0
aio/content/examples/built-in-template-functions/src/app/app.component.css Normal file
View File

15
aio/content/examples/built-in-template-functions/src/app/app.component.html Normal file
View File

@ -0,0 +1,15 @@
<h1>{{title}}</h1>
<h2><code>$any( )</code> type cast function and an undeclared member</h2>
<p>There is no such member as <code>bestByDate</code> in the following two examples, so nothing renders:</p>
<!-- #docregion any-type-cast-function-1 -->
<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
<!-- #enddocregion any-type-cast-function-1 -->
<h2>using <code>this</code></h2>
<!-- #docregion any-type-cast-function-2 -->
<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
<!-- #enddocregion any-type-cast-function-2 -->

16
aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts Normal file
View File

@ -0,0 +1,16 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});

16
aio/content/examples/built-in-template-functions/src/app/app.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Built-in Template Functions';
item = {
name : 'Telephone',
origin : 'Sweden',
price: 98
};
}

18
aio/content/examples/built-in-template-functions/src/app/app.module.ts Normal file
View File

@ -0,0 +1,18 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

14
aio/content/examples/built-in-template-functions/src/index.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Built-in Template Functions Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

11
aio/content/examples/built-in-template-functions/src/main.ts Normal file
View File

@ -0,0 +1,11 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

10
aio/content/examples/built-in-template-functions/stackblitz.json Normal file
View File

@ -0,0 +1,10 @@
{
"description": "Built-in Template Functions",
"files": [
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1,2].*"
],
"file": "src/app/app.component.ts",
"tags": ["Built-in Template Functions"]
}

11
aio/content/examples/interpolation/src/app/app.component.spec.ts
View File

@ -13,15 +13,4 @@ describe('AppComponent', () => {
const app = fixture.debugElement.componentInstance; const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy(); expect(app).toBeTruthy();
})); }));
it(`should have as title 'Featured product:'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Featured product:');
}));
it('should render title in a p tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('p').textContent).toContain('Featured product:');
}));
}); });

30
aio/content/guide/template-syntax.md
View File

@ -1997,29 +1997,29 @@ You'll need this template operator when you turn on strict null checks. It's opt
<hr/> <hr/>
{@a built-in-template-functions}
## Built-in template functions
{@a any-type-cast-function} {@a any-type-cast-function}
## The `$any` type cast function (`$any( <expression> )`) ### The `$any()` type cast function
Sometimes a binding expression will be reported as a type error and it is not possible or difficult Sometimes a binding expression triggers a type error during [AOT compilation](guide/aot-compiler) and it is not possible or difficult
to fully specify the type. To silence the error, you can use the `$any` cast function to cast to fully specify the type. To silence the error, you can use the `$any()` cast function to cast
the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any). the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any) as in the following example:
<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-1" header="src/app/app.component.html" linenums="false"> <code-example path="built-in-template-functions/src/app/app.component.html" region="any-type-cast-function-1" header="src/app/app.component.html" linenums="false">
</code-example> </code-example>
In this example, when the Angular compiler turns your template into TypeScript code, When the Angular compiler turns this template into TypeScript code,
it prevents TypeScript from reporting that `marker` is not a member of the `Hero` it prevents TypeScript from reporting that `bestByDate` is not a member of the `item`
interface. object when it runs type checking on the template.
The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of The `$any()` cast function also works with `this` to allow access to undeclared members of
the component. the component.
<code-example path="template-syntax/src/app/app.component.html" region="any-type-cast-function-2" header="src/app/app.component.html" linenums="false"> <code-example path="built-in-template-functions/src/app/app.component.html" region="any-type-cast-function-2" header="src/app/app.component.html" linenums="false">
</code-example> </code-example>
The `$any` cast function can be used anywhere in a binding expression where a method call is valid. The `$any()` cast function works anywhere in a binding expression where a method call is valid.
## Summary
You've completed this survey of template syntax.
Now it's time to put that knowledge to work on your own components and directives.