docs(basics/di): minor edits following TS switch to provider object literal (#1600)
Minor edits: - Dart side adjustments following #1594. - Renamed example '3a' to just '3' and tweaked the logger message - Removed obsolete Dart block.
This commit is contained in:
parent
e6643b0869
commit
3c77a7fcd1
|
@ -29,15 +29,18 @@ class ProviderComponent1 {
|
|||
|
||||
/// Component just used to ensure that shared E2E tests pass.
|
||||
@Component(
|
||||
selector: 'provider-3a',
|
||||
selector: 'provider-3',
|
||||
template: '{{log}}',
|
||||
providers: const [const Provider(Logger, useClass: Logger)]
|
||||
providers:
|
||||
// #docregion providers-3
|
||||
const [const Provider(Logger, useClass: Logger)]
|
||||
// #enddocregion providers-3
|
||||
)
|
||||
class ProviderComponent3a {
|
||||
class ProviderComponent3 {
|
||||
String log;
|
||||
|
||||
ProviderComponent3a(Logger logger) {
|
||||
logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
|
||||
ProviderComponent3(Logger logger) {
|
||||
logger.log('Hello from logger provided with useClass:Logger');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
@ -250,7 +253,7 @@ class ProviderComponent10 implements OnInit {
|
|||
template: '''
|
||||
<h2>Provider variations</h2>
|
||||
<div id="p1"><provider-1></provider-1></div>
|
||||
<div id="p3a"><provider-3a></provider-3a></div>
|
||||
<div id="p3"><provider-3></provider-3></div>
|
||||
<div id="p4"><provider-4></provider-4></div>
|
||||
<div id="p5"><provider-5></provider-5></div>
|
||||
<div id="p6a"><provider-6a></provider-6a></div>
|
||||
|
@ -261,7 +264,7 @@ class ProviderComponent10 implements OnInit {
|
|||
<div id="p10"><provider-10></provider-10></div>''',
|
||||
directives: const [
|
||||
ProviderComponent1,
|
||||
ProviderComponent3a,
|
||||
ProviderComponent3,
|
||||
ProviderComponent4,
|
||||
ProviderComponent5,
|
||||
ProviderComponent6a,
|
||||
|
|
|
@ -80,9 +80,9 @@ describe('Dependency Injection Tests', function () {
|
|||
expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
|
||||
it('P3a (provide) displays as expected', function () {
|
||||
expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }';
|
||||
expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
|
||||
it('P3 (provide) displays as expected', function () {
|
||||
expectedMsg = 'Hello from logger provided with useClass:Logger';
|
||||
expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
|
||||
});
|
||||
|
||||
it('P4 (useClass:BetterLogger) displays as expected', function () {
|
||||
|
|
|
@ -31,17 +31,17 @@ export class ProviderComponent1 {
|
|||
|
||||
//////////////////////////////////////////
|
||||
@Component({
|
||||
selector: 'provider-3a',
|
||||
selector: 'provider-3',
|
||||
template: template,
|
||||
providers:
|
||||
// #docregion providers-3a
|
||||
// #docregion providers-3
|
||||
[{ provide: Logger, useClass: Logger }]
|
||||
// #enddocregion providers-3a
|
||||
// #enddocregion providers-3
|
||||
})
|
||||
export class ProviderComponent3a {
|
||||
export class ProviderComponent3 {
|
||||
log: string;
|
||||
constructor(logger: Logger) {
|
||||
logger.log('Hello from logger provided with { provide: Logger, useClass: Logger }');
|
||||
logger.log('Hello from logger provided with useClass:Logger');
|
||||
this.log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
@ -252,7 +252,7 @@ export class ProviderComponent10 {
|
|||
template: `
|
||||
<h2>Provider variations</h2>
|
||||
<div id="p1"><provider-1></provider-1></div>
|
||||
<div id="p3a"><provider-3a></provider-3a></div>
|
||||
<div id="p3"><provider-3></provider-3></div>
|
||||
<div id="p4"><provider-4></provider-4></div>
|
||||
<div id="p5"><provider-5></provider-5></div>
|
||||
<div id="p6a"><provider-6a></provider-6a></div>
|
||||
|
@ -264,7 +264,7 @@ export class ProviderComponent10 {
|
|||
`,
|
||||
directives: [
|
||||
ProviderComponent1,
|
||||
ProviderComponent3a,
|
||||
ProviderComponent3,
|
||||
ProviderComponent4,
|
||||
ProviderComponent5,
|
||||
ProviderComponent6a,
|
||||
|
|
|
@ -43,8 +43,10 @@ block real-logger
|
|||
A real implementation would probably use the
|
||||
[logging package](https://pub.dartlang.org/packages/logging).
|
||||
|
||||
block optional-logger
|
||||
//- TBC.
|
||||
block canonical-provider-expr
|
||||
| that creates a new instance of the
|
||||
a(href="../api/core/Provider-class.html") Provider
|
||||
| class:
|
||||
|
||||
block provider-ctor-args
|
||||
- var _secondParam = 'named parameter, such as <code>useClass</code>'
|
||||
|
@ -61,7 +63,8 @@ block dart-diff-const-metadata
|
|||
Instead, we use constant literals or constant constructors.
|
||||
For example, a TypeScript program will use the
|
||||
object literal `{ provide: Logger, useClass: BetterLogger }`.
|
||||
A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`.
|
||||
A Dart annotation would instead use the constant value
|
||||
`const Provider(Logger, useClass: BetterLogger)`.
|
||||
|
||||
block dart-diff-const-metadata-ctor
|
||||
.callout.is-helpful
|
||||
|
|
|
@ -518,14 +518,16 @@ code-example(format="nocode").
|
|||
|
||||
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
|
||||
|
||||
:marked
|
||||
This is actually a short-hand expression for a provider registration using the _provider_ object literal.
|
||||
p
|
||||
| This is actually a short-hand expression for a provider registration
|
||||
block canonical-provider-expr
|
||||
| using a <i>provider</i> object literal with two properties:
|
||||
|
||||
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
|
||||
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
|
||||
|
||||
block provider-ctor-args
|
||||
- var _secondParam = 'provider definition object';
|
||||
//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object';
|
||||
|
||||
:marked
|
||||
The first is the [token](#token) that serves as the key for both locating a dependency value
|
||||
and registering the provider.
|
||||
|
|
Loading…
Reference in New Issue