原文鏈接：https://augury.angular.io/pages/guides/io-demo.html

Launch Demo Application 訪問在線demo

Description 簡介

這個 Input Output Angular 應用展示了在組件內部和跨組件的數據傳遞。這個應用使用了Angular的input和output裝飾器，也使用了事件和數據綁定。

The Input Output Angular application demonstrates passing data inside a component as well as across components. The application makes uses of Angular input and output decorators as well as event and data binding.

這個IO應用由以下五部分組成

The IO Application is composed of 5 components that are:

Components 組件

• Root Component
• Jumbo Message Board
• Message Entry
• Counter
• Toggle Button

Architecture 結構

這個IO應用的根組件是 AppComponent ，它包含了四個有各自特殊行為的組件。

The IO application root component is AppComponent, it houses the other 4 components that each have a specific behaviour.

Component 組件Description 描述

AppComponent	Root Component 根組件
MessageBoardComponent	Large message board. 信息板塊
MessageEntryComponent	Message entry form that emits a message. 輸入一條信息的入口
CounterComponent	A counter that emits a count value. 計數器組件
ToggleComponent	Toggle button with state lights. 控制狀態信號燈的開關

Opening Augury 打開Augury

使用Augury，我們要打開開發者工具

To use Augury, we need to open DevTools.

Ctrl + Shift + I (Cmd + Opt + I on Mac)

打開開發者工具之后，選擇最右側的 Augury 選項卡。

When DevTools opens, select the Augury tab located on the far right.

Component view 組件視圖

Augury打開之后，這個組件視圖將展示組件樹。它展示了應用中所有的可用組件及其父子關系。下面我們看看我們在組織結構章節中討論過的組件列表。

Once Augury is opened, the component view is presented in the Component Tree. It shows all the available components in the application, along with their parent-child relationship. Below we see the list of components discussed in the architecture section earlier.

這個應用的根節點在列表的頂部。列在根節點下向右縮進的都是子節點。

The application root component AppComponent is listed at the top. Shifted slightly to the right and appearing under the root component are all the children components.

如果我們看一眼 app.component.html 文件，我們就會發現在代碼中，子組件是出現在組件的 template 。

In code, a child component is a component that appears inside a component’s template. If we peek at the file app.component.html, we will see.

Edited for readability 寫可讀性好的代碼

...<div><app-messageboard></app-messageboard></div> ...<div><app-messageentry></app-messageentry></div> ...<div><div><app-counter></app-counter></div> ...<app-toggle></app-toggle></div>

如果我們在組件樹中選擇 AppComponent ，右側將出現 Properties 標簽頁，我們可在 State 下看見組件的屬性。

If we select AppComponent inside the Component Tree, to the left inside the Properties tab we see the component’s properties under the State group.

如果您瀏覽下IO應用的示例代碼，你會發現有一個屬性丟失了，它屬于 count 。

If you have looked through the example code for IO application, you will notice there is one property missing, that being the property count.

app.component.ts

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {title = 'Angular Input Output';count: number;@Input() message = "Jumbo Shrimp!";... }

Augury會忽略沒有值的變量，因為ts會將它簡單的編譯出來。所以，建議您給每一個變量賦初始值。如果存在變量是 undefined ，那么這是一個不好的編程實踐并且是個反面教材。

Augury will not show properties in a component if it not assigned a value, since TypeScript will simply compile it out. It is therefore suggested you assign a default value to each property. Having a property with an undefined value is poor coding practice and is an anti-pattern.

Bad

class Foo {name: string; }

Good

class Foo {name: string = ""; }

在我們的IO應用中，我們故意的聲明了一個沒有初始值的變量來演示您應該在Augury中注意的問題。如果您沒有意識到變量未出現的原因，您會感到困惑的。

In our example IO application, we have intentionally declared a property count with no assigned value to demonstrate the behaviour you would see in Augury. If you are not aware of why a property failed to appear, you might be confused.

當然了，如果我們點擊計數按鈕，將會初始化這個計數變量。

However if we click on one of the counter buttons, this will initialize the count property with a value.

Editing properties 編輯屬性

在 Properties 標簽頁，在 State 下，可編輯的屬性會用虛線表示。讓我們來改變 AppComponent 的 title 屬性。

In the Properties tab, under State, an editable property will be displayed with a dashed underline. Let us change the title property of AppComponent.

在組件樹標簽選擇 AppComponent 。

在右側的 Properties 標簽頁選擇 title 。

輸入“IO App” ，然后回車。

Select AppComponent from Component Tree tab.

Click on the text to the right of title from the Properties tab.

Type “IO App” followed by the Enter key.

Firing events 發射事件

IO應用中存在兩個組件有彈射事件。CounterComponent 和 MessageEntryComponent 都有一個使用 @Output() 裝飾器的事件屬性，并且有事件彈出 （EventEmitter）。

The IO application has two components that emit an event. The CounterComponent and MessageEntryComponent have a event property decorated with @Output(), which has an EventEmitter attached to it.

我們選中看看 MessageEntryComponent 。在屬性標簽頁，你會注意到 messageEntry 畫了虛線。點擊它，輸入信息，比如“Debugging with Augury” 并且點擊發射按鈕。

We will look at MessageEntryComponent, start by selecting the component. In the Properties tab, you will notice messageEntry under State. Click and type a message, like “Debugging with Augury” and click on the Emit button.

我們注意到IO應用，在信息展示位置，新的消息已經出現了。通過點擊 Emit 按鈕，一個事件被發射。在例子中這個事件叫 messageEvent 。

You will notice in the IO app, under Message Board the new message is displayed. By clicking on the Emit button, an event was fired, in particular an event called messageEvent.

Viewing source code 閱讀源碼

Augury提供了一個快速方便的方式調到選中組件的源碼。點擊 View Source 鏈接，就會定位到 Properties 標簽頁。

Augury provides a quick and convenient way to jump to the source code of a selected component. To do this, click on the View Source link, it is located in the Properties tab.

按照前邊的步驟，試試 選中 MessageEntryComponent ，點擊 View Source ，就會在開發者工具的 Sources 標簽頁看見源碼。

Following along from the previous step, with MessageEntryComponent selected, click on View Source. This will bring up the source code in DevTools by switching to the Sources tab.

剛剛在“發射事件”部分，我們發射了一個 messageEvent 事件。查看源碼，我們可以看見 @Output() 選擇器定義的屬性。

Earlier under section Firing Events we emitted the messageEvent event. Looking at the source code, we can see this property is defined with the @Output() decorator.

如果我們想確認下事件確實觸發了，我們可以在事件處理函數onSend() 處設置斷點并且發射新的事件。

If we want to convince ourselves that an event is triggered, we can set a breakpoint inside the event handler onSend() and emit a new event.

我們使用Augury分析這個IO應用的部分就到此為止。現在您應該很輕松的調試一個Angular應用的輸入、輸出、屬性綁定和事件。

This concludes our journey of looking at the IO application with Augury. You should now feel more comfortable debugging input, output, property bindings and events in an Angular app.

總結

以上是生活随笔為你收集整理的Augury翻译---io-demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。