Skip to content

Commit

Permalink
chore: fix broken link
Browse files Browse the repository at this point in the history
  • Loading branch information
lacolaco committed Nov 11, 2023
1 parent 0f2fb52 commit b4ac390
Showing 1 changed file with 8 additions and 9 deletions.
17 changes: 8 additions & 9 deletions aio-ja/content/guide/inputs-outputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,23 +48,22 @@ Angularでよくあるパターンは、親コンポーネントと1つ以上の

次に、子コンポーネントのテンプレートにこのように追記します:

<code-example path="inputs-outputs/src/app/item-detail/item-detail.component.html" region="property-in-template" header="src/app/item-detail/item-detail.component.html"></code-example>
<code-example header="src/app/item-detail.component.html" path="inputs-outputs/src/app/item-detail.component.html" region="property-in-template"></code-example>

### 親コンポーネントの設定 {@a configuring-the-parent-component}

次のステップでは、親コンポーネントのテンプレートでプロパティをバインドします。
この例では親コンポーネントのテンプレートは `app.component.html` です。

1. 子のセレクター(ここでは `<app-item-detail>`)を
1. 子のセレクター(ここでは `<app-item-detail>`)を
親コンポーネントのテンプレートでのディレクティブとして使います。
1. [プロパティバインディング](guide/property-binding)を使い、子の`item`プロパティを親の`currentItem`プロパティにバインドします。

2. [プロパティバインディング](guide/property-binding)を使い、子の`item`プロパティを親の`currentItem`プロパティにバインドします。
<code-example header="src/app/app.component.html" path="inputs-outputs/src/app/app.component.html" region="input-parent"></code-example>

<code-example path="inputs-outputs/src/app/app.component.html" region="input-parent" header="src/app/app.component.html"></code-example>
1. 親コンポーネントのクラスで `currentItem` の値を与えます:

3. 親コンポーネントのクラスで `currentItem` の値を与えます:

<code-example path="inputs-outputs/src/app/app.component.ts" region="parent-property" header="src/app/app.component.ts"></code-example>
<code-example header="src/app/app.component.ts" path="inputs-outputs/src/app/app.component.ts" region="parent-property"></code-example>

`@Input()` を使うことで Angular は `currentItem` の値を子に渡すので、`item``Television` を表示します。

Expand Down Expand Up @@ -115,7 +114,7 @@ Angularでよくあるパターンは、親コンポーネントと1つ以上の
1. コンポーネントクラスで、プロパティを`@Output()`でデコレートします。
次の例の`newItemEvent``@Output()``EventEmitter`の型をもっていて、それがイベントであることを意味します。

<code-example header="src/app/item-output.component.ts" path="inputs-outputs/src/app/item-output.component.ts" region="item-output-class"></code-example>
<code-example header="src/app/item-output.component.ts" path="inputs-outputs/src/app/item-output.component.ts" region="item-output"></code-example>

この宣言のそれぞれの部分を説明するとこうなります:

Expand All @@ -128,7 +127,7 @@ Angularでよくあるパターンは、親コンポーネントと1つ以上の

1. 同じコンポーネントクラス内に `addNewItem()` メソッドを作ります:

<code-example path="inputs-outputs/src/app/item-output/item-output.component.ts" region="item-output-class" header="src/app/item-output/item-output.component.ts"></code-example>
<code-example header="src/app/item-output.component.ts" path="inputs-outputs/src/app/item-output.component.ts" region="item-output-class"></code-example>

`addNewItem()`関数は、`@Output()``newItemEvent`を使用して、ユーザーが`<input>`に入力した値をもつイベントを発生させます。

Expand Down

0 comments on commit b4ac390

Please sign in to comment.