寒江钓雪十三郎 發表於 2020-1-10 16:22:00

Angular -- 组件传值

<h2>一、父传子</h2>
<ol class="ol-list">
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">在父组件ts中定义要传递的信息</span></p>
<p class="md-end-block md-p"><img src="https://img2018.cnblogs.com/common/1420220/202001/1420220-20200110155817290-1064287622.jpg"></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在父组件html中的子组件标签中定义自定义属性来绑定父组件定义的信息</span></p>
<p class="md-end-block md-p"><span class="md-tab"><span class="md-plain"><span class="md-tag md-raw-inline"><img src="https://img2018.cnblogs.com/common/1420220/202001/1420220-20200110155905898-754094219.jpg"><br></span></span></span></p>

</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在子组件中的ts中，通过@Input来接收自定义属性的名称</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">import {Input} from '@angular/core';</span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">@Input() info:<span><em>string</em><span class="md-plain">;<br><img src="https://img2018.cnblogs.com/common/1420220/202001/1420220-20200110161011182-1769731041.jpg"><br></span></span></span></span></p>

</li>
<li class="md-end-block md-p"><span class="md-plain">在子组件中的html中就能直接得到值了</span></li>

</ol>
<p class="md-end-block md-p md-focus"><span class="md-tab"> 　　　　<span class="md-plain md-expand">{{info}} ===&gt; father to child<br></span></span><span class="md-tab"><span class="md-plain md-expand"><br></span></span></p>
<p class="md-end-block md-p md-focus">&nbsp;</p>
<h2 class="md-end-block md-p md-focus"><span class="md-tab"><span class="md-plain md-expand">二、子传父</span></span></h2>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">　　方法一:@Output</span></h4>
<ol class="ol-list">
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">在子组件中导入Output 和 EventEmitter</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">import {Output, EventEmitter } from '@angular/core';</span></span></p>

</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">并且通过@Output实例化要传递向父组件的消息</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> @Output() private outer = new EventEmitter();</span></span></p>
<p class="md-end-block md-p"><span class="md-plain"> <span class="md-tab"> <span class="md-plain">public chtofather = 'child to father';</span></span></span></p>

</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">给子组件添加点击事件，点击的时候将数据传递给父组件</span></p>
<p class="md-end-block md-p"><span class="md-plain">handlerClick() {</span></p>
<p class="md-end-block md-p"><span class="md-plain"> <span class="md-tab"> <span class="md-plain">this.outer.emit(this.chtofather)</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain"> }</span></span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>&lt;p (click)="handlerClick()"&gt;&lt;/p&gt;</span></pre>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在父组件html中绑定自定义事件</span></p>
<p class="md-end-block md-p"><span class="md-plain">&lt;app-test (outer) = "handlerChild($event)"&gt;<span class="md-tag md-raw-inline">&lt;/app-test&gt;</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在父组件的ts中通过刚刚绑定的自定义事件中的event就可以获取到了</span></p>
<p class="md-end-block md-p"><span class="md-plain">handlerChild(<span><em>e</em><span class="md-plain">) {</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain"> <span><em>console</em><span class="md-plain">.log(e)</span></span></span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand"> }<br><img src="https://img2018.cnblogs.com/common/1420220/202001/1420220-20200110162858120-280983518.jpg"><br></span></p>

</li>

</ol>
<h4 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">　　方法二：@ViewChild</span></h4>
<blockquote><ol class="ol-list">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在父组件html里的子组件标签上定义一个名字（#名字），相当于这个子组件的id名</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>&lt;app-son #son &gt;&lt;/app-son&gt; 　 　</span></pre>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">在父组件的ts中引入ViewChild</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">import { Component, ViewChild } from '@angular/core';</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">并使用</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">@ViewChild('son') son; 括号里面的名称要与子组件标签#后面的名称一致。</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">最后就可以调用子组件的数据和方法，如果子组件中有一个数据为viewChildinfo，就可以这样去调用</span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">getData() {</span></span></p>
<p class="md-end-block md-p"><span class="md-plain"> <span class="md-tab"> <span class="md-plain">this.mydata = this.son.viewChildinfo;</span></span></span></p>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">}</span></span></p>
</li>
</ol></blockquote><br><br>
来源：https://www.cnblogs.com/yanghana/p/12176713.html
頁: [1]
查看完整版本: Angular -- 组件传值