1home.component.ts 23import from '@angular/core';4
5@component()
10 export class homecomponent implements
oninit
1314
ngoninit() 16;
1920 }
header.component.html<
h1 class
="header"
>this is }
h1>
<
hr />
<
button
(click)
='childfun()'
>呼叫父元件的方法
button
>
<
button
(click)
='childoutfun()'
>子元件廣播事件向父元件傳值
button
>
<
hr />
header.component.ts import from '@angular/core';//import from 'protractor';
@component()
export
class headercomponent implements
oninit, ondestroy, onchanges
ngoninit()
ngondestroy()
ngonchanges()
childfun()
///子元件定義乙個output的屬性，來作為父元件的引用，進行廣播
///父元件通過，監聽這樣乙個子元件的廣播屬性，來響應子元件的操作 注意：由於是事件，所以用 ()
public msg: string = '這是news的header'
} ///父元件通過屬性傳值公開給子元件的方法
parentfun(msg)
///父元件監聽的子元件方法
parentaimedfun(e)
////父元件通過viewchild直接呼叫子元件的方法
excutechildfunbyviewchild()
}
news.component.html<
[msg]
='msg'
[parentfun]
='parentfun'
(childout)
='parentaimedfun($event)'
#headerchild
>
>
<
button
(click)
="headerchild.childfunforparent()"
>試試父元件執行子元件方法
button
>
<
button
(click)
="excutechildfunbyviewchild()"
>試試父元件通過viewchild執行子元件方法
button
>
<
br>
<
p>news works!
p>
<
span
[innerhtml]
="spanhtml"
>
span
>
<
div
[id]
="id"
>
div>
<
div>
<
ul>
<
li *ngfor
="let item of news;let key=index"
>
系列：}
<
br>
車型數量：}
<
ol>
<
div
*ngif
="item.brand.length>0"
>
<
li *ngfor
="let car of item.brand;let key=index"
>
車型：}
li>
div>
<
div
*ngif
="item.brand.length==0"
>
暫無更多資料
div>
ol>
li>
ul>
div>
<
hr />
<
h2>jsonp查詢資料
h2>
輸入關鍵字:
<
input
type
="text"
[(ngmodel)]
="search"
/>
<
button
(click)
="getapidata()"
>點選查詢
button
>
父元件向子元件傳值的方法：
1.通過對子元件的引用，給子元件繫結 屬性，如
其中：msg parentfun 都是 父元件給子元件繫結的屬性
子元件通過@input() 屬性名:type(型別 不知道則為any)來獲取
父元件的屬性傳值
例如：@input() msg: string;
@input() parentfun: any;
2.關於output的用法
output是和eventemitter一起使用來實現父子元件傳值的
原理：a 子元件進行事件廣播
b 父元件在引用的子元件時，監聽廣播事件，既然是事件，那麼寫法肯定是(事件名稱)='父元件的事件函式()'
@output() childbroadcastevent=new eventemitter() 注意：t即為傳播的資料型別
childoutevent()
即發布訂閱模式，來實現值的傳輸
當子元件的某個操作觸發childoutevent的時候，函式呼叫：childbroadcastevent 廣播事件，而父元件監聽這個事件
所以就可以接受來自子元件的資料
3.使用viewchild
父元件申明 @viewchild('子元件的selector') 這時候，相當於拿到子元件的例項，然後就可以直接呼叫子元件的方法或者使用子元件的屬性了
可以理解為**模式
Angular4基本功 元件繫結
最近專案上用到了angular4進行開發前台，組織了零散的知識分享給大家根據需求改變屬性,根據 可以看出，只要star是true則我們現實我們的樣式，如果為false則不顯示，很好的做到了動態的效果 class.glyphicon star empty star div tsprivate star...
angular4如何安裝建立專案 元件
一 安裝最新版本的nodejs 首先在控制台用node v 和npm v來看一上當前的版本。老版本會出現錯誤。二 全域性安裝angular cli 腳手架工具 1.使用npm命令安裝 npm install g angular cli2.npm可能會安裝失敗，可以切換到 映象 npm install...
Angular元件 父子元件通訊
angular元件間通訊 元件之間松耦合，元件之間知道的越少越好。元件4裡面點選按鈕，觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...