1.在子組件html上顯示一個json中的name
在上一篇的基礎(chǔ)上：
首先在ts文件中聲明變量my_name來接收從json中取出來的name蝴罪，
export class PositionComponent implements OnInit {
my_name='';
constructor(){
}
钠四。幔嫂。驴党。
在html文件中給個點擊事件：
<tr *ngFor="let info of select_position index as i"
(click)="my_name=info?.name" >
html文件中:使用插值表達(dá)式顯示name:
<span>{{my_name}}</span>
2.模板變量
模板變量在父組件中可以使用子組件中的方法跟變量瘪撇。
其實我的理解是：在父組件中引用了子組件，模板變量是在子組件引用中進(jìn)行的聲明港庄，所以本就應(yīng)該找到屬于自己的方法跟變量倔既。
如下代碼： #myposition就是模板變量
<app-position ></app-position>是子組件的別名，整個div是父組件的html文件中的內(nèi)容鹏氧。
<div class="col-md-12">
<app-position [degree_now]="_degress" (update_data)="getDataChild($event)" #myposition></app-position>
</div>
個人感覺這個東西跟級聯(lián)的思路有點類似渤涌。
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation" *ngFor="let tab of tab_items index as i" [class.active]="tab_index==i"
(click)="select_tab(i)">
<a href="#" [style.background]="tab_index==i?'red':''" >{{i}}{{tab}}</a>
</li>
</ul>
<!--<span>{{_degress}}</span>-->
<h1>{{myposition.my_name}}</h1>
<!--<h1>{{from_child_data }}</h1>-->
<!--<button (click)="myposition.show()">click show</button>-->
</div>
<div class="col-md-12">
<!--1. 父組件傳值給子組件 模板變量是父組件可以看到子組件中的方法跟變量-->
<!--子組件傳值給父組件-->
<app-position [degree_now]="_degress" (update_data)="getDataChild($event)" #myposition></app-position>
</div>
</div>
3.子組件向父組件傳值
這個比較繁瑣---直接看圖吧
image.png
image.png
image.png
image.png
image.png
image.png
image.png
