angular官網例項(綜合)

2022-07-18 02:09:14 字數 2151 閱讀 8514

(應用的「外殼」)

1、新建專案:

2、進入專案目錄,並啟動這個應用。

3、新增乙個標題

(英雄編輯器)

1、建立元件 myheros

2、在 myheroes.component.ts 中定義陣列

3、在 myheroes.component.html中使用並繫結陣列的值,通過 ([ngmodel]) 繫結input可修改值

我這裡省略了angular官網上的把乙個步驟:建立乙個類 ,下面簡單補充一下建立和使用這個類:

在要使用到hero類的元件裡要 import 這個 hero.ts ,比如在 myheroes.component.ts 中;             import from '../hero.service';

使用hero類:hero: hero = ;

(顯示英雄列表)

1、定義乙個陣列heros,通過 *ngfor 迴圈,在標籤上展示出單個hero的屬性

2、在標籤上新增click事件繫結,通過點選這個事件在下面展示出被點選的這一項

3、新增click事件處理器,在這裡給 selectedhero 賦值

3、使用*ngif隱藏空白的詳情

4、給所選英雄新增樣式

( 主從元件)

1、新建乙個名叫hero-detail的新元件 ng g component hero-detail

2、從heroescomponent模板的底部把表示英雄詳情的 html **剪下貼上到所生成的herodetailcomponent模板中

3、所貼上的 html 引用了selectedhero。 但是,新的herodetailcomponent可以展示任意英雄,而不僅僅所選的。因此還要把模板中的所有selectedhero替換為item

1、在myheros.component.html 中新增 herodetail的佔位符:  <

[item]

="selectedhero"

>

>

2、在heros.detail.component.ts 中新增個帶有@input()裝飾器的 item屬性,這個元件所做的只是通過hero屬性接收乙個英雄物件,並顯示它。 @input() item;

(2)元件通訊有兩種方式:父到子(用@input裝飾器)  、  子到父(用@output裝飾器)       

語法:   @input() name: number;

10 10 010 簡介 官網 官網翻譯

netty是 乙個非同步事件驅動的網路應用程式框架,用於快速開發可維護的高效能協議伺服器和客戶端。netty是乙個nio客戶端伺服器框架,可以快速輕鬆地開發協議伺服器和客戶端等網路應用程式。它極大地簡化並簡化了tcp和udp套接字伺服器等網路程式設計。快速簡便 並不意味著最終的應用程式會受到可維護性...

Angular2官網專案 第一天

來自官網 這篇 英雄指南 涵蓋 了 angular 的核心原理。這次構建的應用會涉及很多特性 獲得並顯示英雄列表,編輯所選英雄的詳情,並在英雄資料的多個檢視之間建立導航。這些特性,在成熟的 資料驅動的應用中經常見到。完成本教程後,我們將學習足夠的 angular 核心技術,並確信 angular 確...

Robolectric Shadows 官網翻譯

robolectric 通過建立乙個包含真實android 框架 的執行時環境來進行工作。這意味著,當你的測試或被測試 呼叫到android框架時,你會獲得更真實的體驗,因為這跟在實際裝置上執行的大部分 都是相同的。然而還是有一些限制 native code 源 android源 不能在你的開發機器...