Angular8 X 元件理解

元件封裝的意義：

需要重用或者簡化邏輯。

命令列建立指令：

ng generate/g component/c components/componentname.

ps: 可以手動加入index.ts進一步方便匯入元件，以及隔離內部變化對外部的影響。

目錄結構如下：

-> components

index.ts

index.ts**：

export * from './child'

->child

index.ts 

index.ts**：

export * from './child.component';

child.component.html

child.component.less

child.component.spec.ts

child.component.ts

父子元件傳值：

父向子元件傳值：

父元件**：

import  from '@angular/core';

@component()
username: string = 'zs';
}

子元件接收**：

child.component.ts

// 在子元件裡面引入input,然後執行@input裝飾器將變數接收

import  from '@angular/core';
@component()
export class childcomponent implements oninit 
ngoninit() 
}

子向父元件傳值：

子元件**：

child.component.ts

// 引入output,evnentemitter模組，通過裝飾器@output例項化eventemitter

import  from '@angular/core';
@component()
export class childcomponent implements oninit 
ngoninit() 
handleevent() 
}

child.component.html

child works!

父元件**：

import  from '@angular/core';

@component()
getchildevent(username) 
}

初探Angular6 x 主從元件

在前幾次分享中,因為 比較簡單,量也不多,所以我們使用命令列和vi進行編輯,從這次開始,我們使用vs code來編寫我們的 此處略過vs code的安裝過程.第一步,我們使用 ng generate component user detail命令來生成乙個詳情模組.在vs code 中我們用ctrl...

初探Angular6 x 主從元件

第一步,我們使用 ng generate component user detail命令來生成乙個詳情模組.在vs code 中我們用ctrl shift p 開啟命令視窗,選ng generate,之後選component,最後輸入我們組建的名稱user detail 我們現在將我們使用者詳情資訊...

angular8 封裝元件

元件封裝的意義和方法 需要重用，或者簡化邏輯 ng generate component元件名 駝峰模式 使用index.ts方便匯入以及隔離內部變化對外部的影響 ng g c 元件名 駝峰模式 如果想在某個資料夾下新建元件 ng g c 檔名 元件名 駝峰模式 在每乙個資料夾下新建乙個index....