From 557c093cf1b96372d8ef27222e93fdfed53a86e4 Mon Sep 17 00:00:00 2001 From: adwd Date: Mon, 20 Nov 2017 16:53:29 +0900 Subject: [PATCH] translate guide/cheatsheet.md --- aio-ja/content/guide/cheatsheet.md | 163 ++++++++++++++--------------- 1 file changed, 81 insertions(+), 82 deletions(-) diff --git a/aio-ja/content/guide/cheatsheet.md b/aio-ja/content/guide/cheatsheet.md index cf758b4f20..423537e9e3 100644 --- a/aio-ja/content/guide/cheatsheet.md +++ b/aio-ja/content/guide/cheatsheet.md @@ -3,14 +3,14 @@
- + -
Bootstrappingブートストラップ

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule);

Bootstraps the app, using the root component from the specified NgModule.

+

指定されたNgModuleのルートコンポーネントを使って、アプリケーションをブートストラップします。
@@ -24,160 +24,159 @@ @NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {} -

Defines a module that contains components, directives, pipes, and providers.

+

コンポーネント、ディレクティブ、パイプおよびプロバイダーを含むモジュールを定義します。

declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] -

List of components, directives, and pipes that belong to this module.

+

このモジュールに属するコンポーネント、ディレクティブおよびパイプのリスト。

imports: [BrowserModule, SomeOtherModule] -

List of modules to import into this module. Everything from the imported modules -is available to declarations of this module.

+

このモジュールにインポートするモジュールのリスト。 インポートされたモジュールのすべては、このモジュールのdeclarationsで使用できます。

exports: [MyRedComponent, MyDatePipe] -

List of components, directives, and pipes visible to modules that import this module.

+

このモジュールをインポートするモジュールに公開されるコンポーネント、ディレクティブ、およびパイプのリスト。

providers: [MyService, { provide: ... }] -

List of dependency injection providers visible both to the contents of this module and to importers of this module.

+

このモジュールと、このモジュールをインポートするモジュールの両方に公開される依存性注入のプロバイダーのリスト。

bootstrap: [MyAppComponent] -

List of components to bootstrap when this module is bootstrapped.

+

このモジュールがブートストラップされたときにブートストラップされるコンポーネントのリスト。

- + - - - - - - - - - - - - - -
Template syntaxテンプレートシンタックス
<input [value]="firstName">

Binds property value to the result of expression firstName.

+

firstName式の結果にvalueプロパティをバインドします。
<div [attr.role]="myAriaRole">

Binds attribute role to the result of expression myAriaRole.

+

myAriaRole式の結果にrole属性をバインドします。
<div [class.extra-sparkle]="isDelightful">

Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

+

要素のextra-sparkleのCSSクラスの有無を、isDelightful式の真偽値にバインドします。
<div [style.width.px]="mySize">

Binds style property width to the result of expression mySize in pixels. Units are optional.

+

mySize式の結果にスタイルプロパティwidthをピクセル単位でバインドします。単位はオプションです。
<button (click)="readRainbow($event)">

Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.

+

このボタン要素（またはその子要素）でクリックイベントがトリガーされ、イベントオブジェクトに渡されるときに、メソッドreadRainbowを呼び出します。
<div title="Hello {{ponyName}}">

Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: +

プロパティを補間された文字列にバインドします（例： "Hello Seabiscuit"）。次と同等です： <div [title]="'Hello ' + ponyName">
<p>Hello {{ponyName}}</p>

Binds text content to an interpolated string, for example, "Hello Seabiscuit".

+

テキストコンテンツを補間された文字列にバインドします（例： "Hello Seabiscuit"）。
<my-cmp [(title)]="name">

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

+

双方向データバインディングを設定します。次と同等です: <my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video>

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

+

現在のテンプレートのデータバインディング式およびイベントバインディング式の中で、video要素のインスタンスへのアクセスを提供するローカル変数movieplayerを作成します。
<p *myUnless="myExpression">...</p>

The * symbol turns the current element into an embedded template. Equivalent to: +

*シンボルは、現在の要素を埋め込みテンプレートに変換します。次と同等です: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

+

cardNumber式の現在の値をmyCardNumberFormatterというパイプで変換します。
<p>Employer: {{employer?.companyName}}</p>

The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

+

セーフナビゲーション演算子（?）は、employerフィールドがオプションでもし値がundefinedの場合、残りの式を無視することを意味します。
<svg:rect x="0" y="0" width="100" height="100"/>

An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

+

SVG要素をHTML要素から曖昧さを取り除くために、SVGスニペットテンプレートにはルート要素にsvg:というプレフィックスが必要です。
<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg>

An <svg> root element is detected as an SVG element automatically, without the prefix.

+

<svg>ルート要素は接頭辞なしで自動的にSVG要素として検出されます。
- + - - - -
Built-in directivesビルトインディレクティブ

import { CommonModule } from '@angular/common';

<section *ngIf="showSection">

Removes or recreates a portion of the DOM tree based on the showSection expression.

+

showSection式に基づいてDOMツリーの一部を削除または再作成します。
<li *ngFor="let item of list">

Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

+

li要素とその内容をテンプレートに変換し、それを使用してlist内の各項目のビューをインスタンス化します。
<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
<ng-template ngSwitchDefault>...</ng-template>
</div>

Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

+

conditionExpressionの現在の値に基づいて埋め込みテンプレートの1つを選択することによって、divの内容を条件にしたがって入れ替えます。
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

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.

+

要素のCSSクラスの有無を、関連付けられたマップ値の真偽値にバインドします。 右側の式は {class-name: true/false } なマップを返さなければなりません。
- + -
Formsフォーム

import { FormsModule } from '@angular/forms';

<input [(ngModel)]="userName">

Provides two-way data-binding, parsing, and validation for form controls.

+

フォームコントロールの双方向データバインディング、パース、およびバリデーションを行います。
- + - - - - @@ -185,202 +184,202 @@ is available to declarations of this module.

Class decoratorsクラスデコレーター

import { Directive, ... } from '@angular/core';

@Component({...})
class MyComponent() {}

Declares that a class is a component and provides metadata about the component.

+

クラスがコンポーネントであることを宣言し、コンポーネントに関するメタデータを提供します。
@Directive({...})
class MyDirective() {}

Declares that a class is a directive and provides metadata about the directive.

+

クラスがディレクティブであることを宣言し、ディレクティブに関するメタデータを提供します。
@Pipe({...})
class MyPipe() {}

Declares that a class is a pipe and provides metadata about the pipe.

+

クラスがパイプであることを宣言し、パイプに関するメタデータを提供します。
@Injectable()
class MyService() {}

Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. +

依存性のインジェクターがこのクラスをインスタンスを作成しているときに、コンストラクタに依存性を注入する必要があるクラスにあることを宣言します。

- + - -
Directive configurationディレクティブの設定

@Directive({ property1: value1, ... })

selector: '.cool-button:not(a)'

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, -[attribute], .class, and :not().

-

Does not support parent-child relationship selectors.

+

テンプレート内でこのディレクティブを識別するCSSセレクタを指定します。 サポートされるセレクタには、element、 +[attribute]、.classおよび:not()です。 +

親子関係セレクタはサポートしていません。
providers: [MyService, { provide: ... }]

List of dependency injection providers for this directive and its children.

+

このディレクティブとその子孫に対する依存性注入プロバイダのリスト。
- + - - - -
Component configurationコンポーネントの設定

-@Component extends @Directive, -so the @Directive configuration applies to components as well

+@Componentは@Directiveを継承するので、 +@Directiveの設定はコンポーネントにも同様に適用されます。
moduleId: module.id

If set, the templateUrl and styleUrl are resolved relative to the component.

+

設定されている場合、templateUrlとstyleUrlはコンポーネントに対して相対パスとして解決されます。
viewProviders: [MyService, { provide: ... }]

List of dependency injection providers scoped to this component's view.

+

このコンポーネントのビューにスコープされた依存性注入プロバイダのリスト。
template: 'Hello {{name}}'
templateUrl: 'my-component.html'

Inline template or external template URL of the component's view.

+

コンポーネントのビューのインラインテンプレートまたは外部テンプレートURL。
styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

List of inline CSS styles or external stylesheet URLs for styling the component’s view.

+

コンポーネントのビューをスタイリングするためのインラインCSSスタイルまたは外部スタイルシートURLのリスト。
- + - - - - - - - -
Class field decorators for directives and componentsディレクティブとコンポーネントのクラスフィールドデコレータ

import { Input, ... } from '@angular/core';

@Input() myProperty;

Declares an input property that you can update via property binding (example: +

プロパティバインディングを使用して更新できる入力プロパティを宣言します。 (例: <my-cmp [myProperty]="someExpression">).
@Output() myEvent = new EventEmitter();

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

+

購読可能なイベントを発生させる出力プロパティをイベントバインディングで宣言します。 (例: <my-cmp (myEvent)="doSomething()">)
@HostBinding('class.valid') isValid;

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

+

ディレクティブ/コンポーネントのプロパティ（isValid）にホスト要素のプロパティ（ここではCSSクラスvalid）をバインドします。
@HostListener('click', ['$event']) onClick(e) {...}

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

+

ホスト要素のイベント（click）を、オプショナルな引数（$event）を渡してディレクティブ/コンポーネントのメソッド（onClick）で購読します。
@ContentChild(myPredicate) myChildComponent;

Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

+

コンポーネントのコンテンツクエリ（myPredicate）の最初の結果をクラスのプロパティ（myChildComponent）にバインドします。
@ContentChildren(myPredicate) myChildComponents;

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

+

コンポーネントのコンテンツクエリ（myPredicate）の結果をクラスのプロパティ（myChildComponents）にバインドします。
@ViewChild(myPredicate) myChildComponent;

Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

+

コンポーネントビューのクエリ（myPredicate）の最初の結果をクラスのプロパティ（myChildComponent）にバインドします。 ディレクティブでは使用できません。
@ViewChildren(myPredicate) myChildComponents;

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

+

コンポーネントビューのクエリ（myPredicate）の結果をクラスのプロパティ（myChildComponents）にバインドします。 ディレクティブでは使用できません。
- - + - - - - - - - - -
Directive and component change detection and lifecycle hooks

(implemented as class methods) +

ディレクティブとコンポーネントの変更検知とライフサイクルフック

(クラスメソッドとして実装されます)

constructor(myService: MyService, ...) { ... }

Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

+

他のライフサイクルフックの前に呼び出されます。 これを使用して依存を注入しますが、ここで複雑な処理をするのは避けてください。
ngOnChanges(changeRecord) { ... }

Called after every change to input properties and before processing content or child views.

+

コンテンツビューまたは子ビューを処理する前と、入力プロパティが変更されるたびに呼び出されます。
ngOnInit() { ... }

Called after the constructor, initializing input properties, and the first call to ngOnChanges.

+

コンストラクタと入力プロパティの初期化、最初のngOnChangesの後に呼び出されます。
ngDoCheck() { ... }

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.

+

コンポーネントまたはディレクティブの入力プロパティがチェックされるたびに呼び出されます。 これを使用して、カスタムチェックを実行して変更検出を拡張します。
ngAfterContentInit() { ... }

Called after ngOnInit when the component's or directive's content has been initialized.

+

コンポーネントまたはディレクティブのコンテンツの初期化が完了したときにngOnInitの後に呼び出されます。
ngAfterContentChecked() { ... }

Called after every check of the component's or directive's content.

+

コンポーネントまたはディレクティブのすべてのチェックの後に呼び出されます。
ngAfterViewInit() { ... }

Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

+

コンポーネントのビューの初期化が完了したときにngAfterContentInitの後に呼び出されます。 コンポーネントにのみ適用されます。
ngAfterViewChecked() { ... }

Called after every check of the component's view. Applies to components only.

+

コンポーネントのビューをチェックするたびに呼び出されます。 コンポーネントにのみ適用されます。
ngOnDestroy() { ... }

Called once, before the instance is destroyed.

+

インスタンスが破棄される前に一度呼び出されます。
- + - - -
Dependency injection configuration依存性の注入の設定
{ provide: MyService, useClass: MyMockService }

Sets or overrides the provider for MyService to the MyMockService class.

+

MyServiceのプロバイダをMyMockServiceクラスに設定またはオーバーライドします。
{ provide: MyService, useFactory: myFactory }

Sets or overrides the provider for MyService to the myFactory factory function.

+

MyServiceのプロバイダをmyFactoryファクトリ関数に設定またはオーバーライドします。
{ provide: MyValue, useValue: 41 }

Sets or overrides the provider for MyValue to the value 41.

+

MyValueのプロバイダを41の値に設定またはオーバーライドします。
- + - - - - - - - - -
Routing and navigationルーティングとナビゲーション

import { Routes, RouterModule, ... } from '@angular/router';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component: MyComponent },
{ path: 'staticPath', component: ... },
{ path: '**', component: ... },
{ path: 'oldPath', redirectTo: '/staticPath' },
{ path: ..., component: ..., data: { message: 'Custom' } }
]);

const routing = RouterModule.forRoot(routes);

Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.

+

アプリケーションのルートを構成します。 静的なもの、パラメータ化されたもの、リダイレクトおよびワイルドカードのルートをサポートします。 また、カスタムのdataおよびresolveをサポートします。

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

Marks the location to load the component of the active route.

+

アクティブなルートのコンポーネントをロードする場所をマークします。

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

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.

+

ルートパス、必須もしくはオプショナルのパラメータ、クエリパラメータおよびフラグメントで構成されるルートの設定に基づいて、別のビューへのリンクを作成します。 rootとなるルートに移動するには、/接頭辞を使用します。 子ルートの場合は、./接頭辞を使用します。 兄弟または親の場合は、../接頭辞を使用します。
<a [routerLink]="[ '/path' ]" routerLinkActive="active">

The provided classes are added to the element when the routerLink becomes the current active route.

+

routerLinkが現在のアクティブなルートになると、指定されたクラスが要素に追加されます。
class CanActivateGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivate: [CanActivateGuard] }

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.

+

このコンポーネントをアクティブにすべきかを判断するためにルータが最初に呼び出すクラスを定義するためのインタフェース。 boolean、もしくはObservable<boolean>およびPromise<boolean>を返す必要があります。
class CanDeactivateGuard implements CanDeactivate<T> {
canDeactivate(
component: T,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canDeactivate: [CanDeactivateGuard] }

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.

+

ナビゲーション後にルータがこのコンポーネントを非アクティブ化すべきかを判断するためにルータが最初に呼び出すべきクラスを定義するためのインタフェース。 boolean、もしくはObservable<boolean>およびPromise<boolean>を返す必要があります。
class CanActivateChildGuard implements CanActivateChild {
canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canActivateChild: [CanActivateGuard],
children: ... }

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.

+

子ルートをアクティブにすべかを判断するためにルータが最初に呼び出すクラスを定義するためのインタフェース。boolean、もしくはObservable<boolean>およびPromise<boolean>を返す必要があります。
class ResolveGuard implements Resolve<T> {
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any>|Promise<any>|any { ... }
}

{ path: ..., resolve: [ResolveGuard] }

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.

+

ルートをレンダリングする前にルートデータを解決するためにルータが最初に呼び出すべきクラスを定義するためのインタフェース。 値か、その値を解決するObservableおよびPromiseを返す必要があります。
class CanLoadGuard implements CanLoad {
canLoad(
route: Route
): Observable<boolean>|Promise<boolean>|boolean { ... }
}

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }

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.

+

遅延ロードされたモジュールがロードされるべきかを判断するためにルータが最初に呼び出すべきクラスを定義するためのインタフェース。boolean、もしくはObservable<boolean>およびPromise<boolean>を返す必要があります。