From 5b2d976b1fe68bbe3982693399ab2accebb22048 Mon Sep 17 00:00:00 2001 From: Masayuki Sugahara Date: Sat, 3 Feb 2024 13:50:45 +0000 Subject: [PATCH 1/2] translate: guide/property-binding (#751) --- aio-ja/content/guide/property-binding.en.md | 113 ++++++++++++++++++++ aio-ja/content/guide/property-binding.md | 80 +++++++------- 2 files changed, 153 insertions(+), 40 deletions(-) create mode 100644 aio-ja/content/guide/property-binding.en.md diff --git a/aio-ja/content/guide/property-binding.en.md b/aio-ja/content/guide/property-binding.en.md new file mode 100644 index 0000000000..7fd65af797 --- /dev/null +++ b/aio-ja/content/guide/property-binding.en.md @@ -0,0 +1,113 @@ +# Property binding + +Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +## Prerequisites + +* [Basics of components](guide/architecture-components) +* [Basics of templates](guide/glossary#template) +* [Binding syntax](guide/binding-syntax) + +## Understanding the flow of data + +Property binding moves a value in one direction, from a component's property into a target element property. + +
+ +For more information on listening for events, see [Event binding](guide/event-binding). + +
+ +To read a target element property or call one of its methods, see the API reference for [ViewChild](api/core/ViewChild) and [ContentChild](api/core/ContentChild). + +## Binding to a property + +To bind to an element's property, enclose it in square brackets, `[]`, which identifies the property as a target property. + +A target property is the DOM property to which you want to assign a value. + +To assign a value to a target property for the image element's `src` property, type the following code: + + + +In most cases, the target name is the name of a property, even when it appears to be the name of an attribute. + +In this example, `src` is the name of the `` element property. + + + +The brackets, `[]`, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. + + + +Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. + +To assign a string to a property, type the following code: + + + +Omitting the brackets renders the string `parentItem`, not the value of `parentItem`. + +## Setting an element property to a component property value + +To bind the `src` property of an `` element to a component's property, place `src` in square brackets followed by an equal sign and then the property. + +Using the property `itemImageUrl`, type the following code: + + + +Declare the `itemImageUrl` property in the class, in this case `AppComponent`. + + + +{@a colspan} + +#### `colspan` and `colSpan` + +A common point of confusion is between the attribute, `colspan`, and the property, `colSpan`. Notice that these two names differ by only a single letter. + +To use property binding using `colSpan`, type the following: + + + +To disable a button while the component's `isUnchanged` property is `true`, type the following: + + + +To set a property of a directive, type the following: + + + +To set the model property of a custom component for parent and child components to communicate with each other, type the following: + + + +## Toggling button features + + + +To use a Boolean value to disable a button's features, bind the `disabled` DOM attribute to a Boolean property in the class. + + + + + +Because the value of the property `isUnchanged` is `true` in the `AppComponent`, Angular disables the button. + + + +## What's next + +* [Property binding best practices](guide/property-binding-best-practices) +* [Event binding](guide/event-binding) +* [Text Interpolation](guide/interpolation) +* [Class & Style Binding](guide/class-binding) +* [Attribute Binding](guide/attribute-binding) + +@reviewed 2022-04-14 diff --git a/aio-ja/content/guide/property-binding.md b/aio-ja/content/guide/property-binding.md index 7fd65af797..fe696099b0 100644 --- a/aio-ja/content/guide/property-binding.md +++ b/aio-ja/content/guide/property-binding.md @@ -1,113 +1,113 @@ -# Property binding +# プロパティバインディング -Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components. +Angularのプロパティバインディングは、HTML要素やディレクティブのプロパティに値を設定するのに役立ちます。プロパティバインディングを使用すると、ボタン機能の切り替え、プログラムによるパスの設定、コンポーネント間の値の共有などを行うことができます。
-See the for a working example containing the code snippets in this guide. +このガイドのコードスニペットを含む動作例については、を参照してください。
-## Prerequisites +## 前提知識 -* [Basics of components](guide/architecture-components) -* [Basics of templates](guide/glossary#template) -* [Binding syntax](guide/binding-syntax) +* [コンポーネントの基礎知識](guide/architecture-components) +* [テンプレートの基礎知識](guide/glossary#template) +* [バインディング構文](guide/binding-syntax) -## Understanding the flow of data +## データの流れを理解する -Property binding moves a value in one direction, from a component's property into a target element property. +プロパティバインディングは、コンポーネントのプロパティからターゲット要素のプロパティへ、単方向に値を設定します。
-For more information on listening for events, see [Event binding](guide/event-binding). +イベントをリッスンする方法については、[イベントバインディング](guide/event-binding)を参照してください。
-To read a target element property or call one of its methods, see the API reference for [ViewChild](api/core/ViewChild) and [ContentChild](api/core/ContentChild). +ターゲット要素のプロパティを読み取ったり、そのメソッドを呼び出したりするには、[ViewChild](api/core/ViewChild)と[ContentChild](api/core/ContentChild)のAPIリファレンスを参照してください。 -## Binding to a property +## プロパティのバインディング -To bind to an element's property, enclose it in square brackets, `[]`, which identifies the property as a target property. +要素のプロパティにバインドするには、ターゲットプロパティを角括弧`[]`で囲みます。 -A target property is the DOM property to which you want to assign a value. +ターゲットプロパティは、値を割り当てたいDOMプロパティです。 -To assign a value to a target property for the image element's `src` property, type the following code: +ターゲットプロパティを``要素の`src`プロパティとして、値を割り当てるには、次のコードを使います。 -In most cases, the target name is the name of a property, even when it appears to be the name of an attribute. +ほとんどの場合、ターゲット名はプロパティの名前です。属性の名前のように見える場合でも、プロパティの名前です。 -In this example, `src` is the name of the `` element property. +この例では、`src`は``要素のプロパティ名です。 -The brackets, `[]`, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. +角括弧`[]`をつけると、Angularは代入の右辺を動的な式として評価します。 -Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. +角括弧がない場合、Angularは右辺を文字列リテラルとして扱い、その静的な値をプロパティに設定します。 -To assign a string to a property, type the following code: +文字列をプロパティに割り当てるには、次のコードを使います。 -Omitting the brackets renders the string `parentItem`, not the value of `parentItem`. +角括弧をつけないと、`parentItem`の値ではなく、`parentItem`という文字列が設定されます。 -## Setting an element property to a component property value +## 要素のプロパティをコンポーネントのプロパティ値に設定する -To bind the `src` property of an `` element to a component's property, place `src` in square brackets followed by an equal sign and then the property. +``要素の`src`プロパティをコンポーネントのプロパティにバインドするには、角括弧の中に`src`を入力し、イコール記号に続けてプロパティを入力します。 -Using the property `itemImageUrl`, type the following code: +`itemImageUrl`プロパティを使って、次のコードを入力します。 -Declare the `itemImageUrl` property in the class, in this case `AppComponent`. +コンポーネントクラス、この場合は`AppComponent`クラスで`itemImageUrl`プロパティを宣言します。 {@a colspan} -#### `colspan` and `colSpan` +#### `colspan`と`colSpan` -A common point of confusion is between the attribute, `colspan`, and the property, `colSpan`. Notice that these two names differ by only a single letter. +属性`colspan`とプロパティ`colSpan`は別のものです。名前が1文字だけ異なることに留意してください。 -To use property binding using `colSpan`, type the following: +`colSpan`を使ってプロパティを設定するには、次のコードを使います。 -To disable a button while the component's `isUnchanged` property is `true`, type the following: +コンポーネントの`isUnchanged`プロパティが`true`の間、ボタンを無効にするには、次のコードを使います。 -To set a property of a directive, type the following: +ディレクティブのプロパティを設定するには、次のコードを使います。 -To set the model property of a custom component for parent and child components to communicate with each other, type the following: +親子コンポーネント間で通信するために、カスタムコンポーネントのモデルプロパティを設定するには、次のコードを使います。 -## Toggling button features +## ボタンの状態を切り替える -To use a Boolean value to disable a button's features, bind the `disabled` DOM attribute to a Boolean property in the class. +ボタンを無効化するには、`disabled`DOM属性をコンポーネントクラスのBoolean型のプロパティにバインドします。 -Because the value of the property `isUnchanged` is `true` in the `AppComponent`, Angular disables the button. +`AppComponent`クラスで定義されている`isUnchanged`プロパティが`true`なので、Angularはボタンを無効にします。 -## What's next +## 次のステップ -* [Property binding best practices](guide/property-binding-best-practices) -* [Event binding](guide/event-binding) -* [Text Interpolation](guide/interpolation) -* [Class & Style Binding](guide/class-binding) -* [Attribute Binding](guide/attribute-binding) +* [プロパティバインディング ベストプラクティス](guide/property-binding-best-practices) +* [イベントバインディング](guide/event-binding) +* [補間による値の表示](guide/interpolation) +* [クラスとスタイルのバインディング](guide/class-binding) +* [属性バインディング](guide/attribute-binding) @reviewed 2022-04-14 From d64f05eb5b7056074e8feffec18df91c8db83b06 Mon Sep 17 00:00:00 2001 From: Masayuki Date: Tue, 18 Jun 2024 15:15:39 +0000 Subject: [PATCH 2/2] =?UTF-8?q?translate:=20guide/property-binding?= =?UTF-8?q?=E3=81=AE=E6=94=B9=E8=A1=8C=E4=BD=8D=E7=BD=AE=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio-ja/content/guide/property-binding.en.md | 16 +++++++--------- aio-ja/content/guide/property-binding.md | 14 ++++++-------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/aio-ja/content/guide/property-binding.en.md b/aio-ja/content/guide/property-binding.en.md index 7fd65af797..59cb7a1ad5 100644 --- a/aio-ja/content/guide/property-binding.en.md +++ b/aio-ja/content/guide/property-binding.en.md @@ -18,15 +18,15 @@ See the for a working example containing the code Property binding moves a value in one direction, from a component's property into a target element property. -
+To read a target element property or call one of its methods, see the API reference for [ViewChild](api/core/ViewChild) and [ContentChild](api/core/ContentChild). -For more information on listening for events, see [Event binding](guide/event-binding). +## Binding to a property -
+
-To read a target element property or call one of its methods, see the API reference for [ViewChild](api/core/ViewChild) and [ContentChild](api/core/ContentChild). +For information on listening for events, see [Event binding](guide/event-binding). -## Binding to a property +
To bind to an element's property, enclose it in square brackets, `[]`, which identifies the property as a target property. @@ -48,12 +48,10 @@ The brackets, `[]`, cause Angular to evaluate the right-hand side of the assignm Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value. -To assign a string to a property, type the following code: +To assign a string to a component's property (such as the `childItem` of the `ItemDetailComponent`), you use the same bracket assignment notation: -Omitting the brackets renders the string `parentItem`, not the value of `parentItem`. - ## Setting an element property to a component property value To bind the `src` property of an `` element to a component's property, place `src` in square brackets followed by an equal sign and then the property. @@ -110,4 +108,4 @@ Because the value of the property `isUnchanged` is `true` in the `AppComponent`, * [Class & Style Binding](guide/class-binding) * [Attribute Binding](guide/attribute-binding) -@reviewed 2022-04-14 +@reviewed 2023-09-01 diff --git a/aio-ja/content/guide/property-binding.md b/aio-ja/content/guide/property-binding.md index 7486017ad0..9137408c47 100644 --- a/aio-ja/content/guide/property-binding.md +++ b/aio-ja/content/guide/property-binding.md @@ -18,21 +18,21 @@ Angular のプロパティバインディングは、HTML 要素やディレク プロパティバインディングは、コンポーネントのプロパティからターゲット要素のプロパティへ、単方向に値を設定します。 +ターゲット要素のプロパティを読み取ったり、そのメソッドを呼び出したりするには、[ViewChild](api/core/ViewChild)と[ContentChild](api/core/ContentChild)の API リファレンスを参照してください。 + +## プロパティのバインディング +
イベントをリッスンする方法については、[イベントバインディング](guide/event-binding)を参照してください。
-ターゲット要素のプロパティを読み取ったり、そのメソッドを呼び出したりするには、[ViewChild](api/core/ViewChild)と[ContentChild](api/core/ContentChild)の API リファレンスを参照してください。 - -## プロパティのバインディング - 要素のプロパティにバインドするには、ターゲットプロパティを角括弧`[]`で囲みます。 ターゲットプロパティは、値を割り当てたい DOM プロパティです。 -ターゲットプロパティを``要素の`src`プロパティとして、値を割り当てるには、次のコードを使います。 +``要素の`src`プロパティをターゲットにして値を割り当てるには、次のコードを使います。 @@ -48,12 +48,10 @@ Angular のプロパティバインディングは、HTML 要素やディレク 角括弧がない場合、Angular は右辺を文字列リテラルとして扱い、その静的な値をプロパティに設定します。 -文字列をプロパティに割り当てるには、次のコードを使います。 +文字列をコンポーネントのプロパティ (たとえば`ItemDetailComponent`の`childItem`) に割り当てるには、同じ括弧の記法を使います。 -角括弧をつけないと、`parentItem`の値ではなく、`parentItem`という文字列が設定されます。 - ## 要素のプロパティをコンポーネントのプロパティ値に設定する ``要素の`src`プロパティをコンポーネントのプロパティにバインドするには、角括弧の中に`src`を入力し、イコール記号に続けてプロパティを入力します。