honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: make inputs-outputs example more accessible (#41288) 

PR Close #41288
This commit is contained in:
Kapunahele Wong 2021-03-19 16:44:28 -04:00 committed by Jessica Janiuk
parent 70fb3e958b
commit 326884736e
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.html
View File

@ -1,2 +1,2 @@
<span [style.text-decoration]="lineThrough">Item: {{item}}</span>
<button (click)="delete()">Delete it with an Output!</button>
<p [style.text-decoration]="lineThrough">Item: {{item}}</p>
<button (click)="delete()">Delete item with an Output!</button>

3
aio/content/examples/inputs-outputs/src/app/item-output/item-output.component.html
View File

@ -1,6 +1,7 @@
<h2>Child component with @Output()</h2>
<!-- #docregion child-output -->
<label>Add an item: <input #newItem></label>
<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>
<!-- #enddocregion child-output -->

8
aio/content/guide/inputs-outputs.md
View File

@ -32,7 +32,7 @@ Conversely, `@Output()` allows the child to send data to a parent component.
The `@Input()` decorator in a child component or directive signifies that the property can receive its value from its parent component.
<div class="lightbox">
<img src="generated/images/guide/inputs-outputs/input.svg" alt="Input data flow diagram">
<img src="generated/images/guide/inputs-outputs/input.svg" alt="Input data flow diagram of data flowing from parent to child">
</div>
To use `@Input()`, you must configure the parent and child.
@ -72,7 +72,7 @@ With `@Input()`, Angular passes the value for `currentItem` to the child so that
The following diagram shows this structure:
<div class="lightbox">
<img src="generated/images/guide/inputs-outputs/input-diagram-target-source.svg" alt="Property binding diagram">
<img src="generated/images/guide/inputs-outputs/input-diagram-target-source.svg" alt="Property binding diagram of the target, item, in square brackets set to the source, currentItem, on the right of an equal sign">
</div>
The target in the square brackets, `[]`, is the property you decorate with `@Input()` in the child component.
@ -90,7 +90,7 @@ See the [`OnChanges`](guide/lifecycle-hooks#onchanges) section of the [Lifecycle
The `@Output()` decorator in a child component or directive allows data to flow from the child to the parent.
<div class="lightbox">
<img src="generated/images/guide/inputs-outputs/output.svg" alt="Output diagram">
<img src="generated/images/guide/inputs-outputs/output.svg" alt="Output diagram of the data flow going from child to parent">
</div>
`@Output()` marks a property in a child component as a doorway through which data can travel from the child to the parent.
@ -190,7 +190,7 @@ When you click delete, the child component raises an event, `deleteRequest`, whi
The following diagram shows the different parts of the `@Input()` and `@Output()` on the `<app-input-output>` child component.
<div class="lightbox">
<img src="generated/images/guide/inputs-outputs/input-output-diagram.svg" alt="Input/Output diagram">
<img src="generated/images/guide/inputs-outputs/input-output-diagram.svg" alt="Diagram of an input target and an output target each bound to a source.">
</div>
The child selector is `<app-input-output>` with `item` and `deleteRequest` being `@Input()` and `@Output()`