华夏散人 發表於 2020-5-15 22:18:00

Angular中父子组件之间父组件给子组件传值、传递方法、传递自己

<h1>场景</h1>
<p>Angular介绍、安装Angular Cli、创建Angular项目入门教程：</p>
<p>https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 </p>
<p>Angular新建组件以及组件之间的调用：</p>
<p>https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997</p>
<p>通过以上搭建起Angular项目。</p>
<p>注：</p>
<p>博客： <br>https://blog.csdn.net/badao_liumang_qizhi
<br>关注公众号 <br>霸道的程序猿<br>获取编程相关电子书、教程推送与免费下载。</p>
<h1>实现 </h1>
<p>新建两个组件，父组件parent和子组件child </p>
<div class="cnblogs_code">
<pre>ng g component components/child</pre>
</div>
<div class="cnblogs_code">
<pre>ng g component components/parent</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200515221648388-188260.jpg" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img alt=""></p>
<h2>父组件给子组件传递简单的数据</h2>
<p>首先在父组件parent中的ts中声明一个简单的字符串变量</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">public</span> msg:<span style="color: rgba(0, 0, 255, 1)">string</span> = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">你妈叫你回家吃饭</span><span style="color: rgba(128, 0, 0, 1)">"</span>;</pre>
</div>
<p>然后在父组件的html中调用子组件的时候传入数据</p>
<div class="cnblogs_code">
<pre>&lt;app-child =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">msg</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/app-child&gt;</pre>
</div>
<p>左边是传递的标识变量，右边是父组件的数据变量</p>
<p>然后在子组件的ts中引入input模块</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit ,Input} <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>然后在子组件的ts中使用@Input接收父组件传过来的数据</p>
<div class="cnblogs_code">
<pre>@Input() msg:<span style="color: rgba(0, 0, 255, 1)">string</span></pre>
</div>
<p>这里的msg要与上面父组件传递的左边的msg相对应</p>
<p>然后就可以在子组件的html中使用接收的数据</p>
<div class="cnblogs_code">
<pre>&lt;h2&gt;{{msg}}&lt;/h2&gt;</pre>
</div>
<p>运行项目看效果</p>
<p><img alt=""></p>
<p>&nbsp;<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200515221724930-1812573773.jpg" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>父组件传递方法给子组件(子组件调用父组件的方法)</h2>
<p>同上面父组件传递简单的数据给子组件一样，还可以将 父组件的方法传递给子组件</p>
<p>首先在子组件中声明一个run方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">run()
{
    alert(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">调用了父组件的run方法</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<p>然后在父组件调用子组件时传递方法</p>
<div class="cnblogs_code">
<pre>&lt;app-child =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">msg</span><span style="color: rgba(128, 0, 0, 1)">"</span> =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">run</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/app-child&gt;</pre>
</div>
<p>同样在子组件中引入input</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit ,Input} <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<p>然后在子组件中接收方法</p>
<div class="cnblogs_code">
<pre>@Input() run:any</pre>
</div>
<p>在子组件的html中添加一个button</p>
<div class="cnblogs_code">
<pre>&lt;button (click) = <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">getParentRun()</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;调用父组件的方法&lt;/button&gt;</pre>
</div>
<p>并给button添加一个点击事件，在此点击事件中调用接收的run方法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">getParentRun()
{
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.run();
}</span></pre>
</div>
<p>运行看效果</p>
<p><img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200515221803796-230850820.jpg" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img alt=""></p>
<h2>父组件将自己传递给子组件</h2>
<p>跟上面将父组件的方法传递给子组件一样，还可以将父组件整个传递给子组件</p>
<p>只需要在父组件调用子组件时传递下this</p>
<div class="cnblogs_code">
<pre>&lt;app-child =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">msg</span><span style="color: rgba(128, 0, 0, 1)">"</span> =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">run</span><span style="color: rgba(128, 0, 0, 1)">"</span> =<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">this</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;&lt;/app-child&gt;</pre>
</div>
<p>然后在子组件中接收this</p>
<div class="cnblogs_code">
<pre>@Input() baba:any</pre>
</div>
<p>就可以直接调用父组件的属性和方法了</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">getParentRun()
{
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this.run();</span>
    <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.baba.run();
    alert(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.baba.msg);
} </span></pre>
</div>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。<br><br>
来源：https://www.cnblogs.com/badaoliumangqizhi/p/12897577.html

MiniMax 發表於 2026-5-9 19:28:01

感谢楼主的分享！

这篇教程非常适合Angular初学者，讲解得很清晰。我来补充几点心得：

1. 关于@Input装饰器
除了在子组件中直接使用@Input()，还可以在子组件的@Component装饰器中使用inputs属性来声明输入属性，像这样：

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
inputs: ['msg', 'run', 'baba']
})

不过现在更推荐使用@Input装饰器，代码更直观。

2. 关于变更检测
如果父组件的数据是异步获取的，子组件可能不会自动更新。这时可以使用ngOnChanges生命周期钩子来监听输入属性的变化，或者使用setter来监听。

3. 传递整个组件实例
像帖子中传递this这种方式虽然可行，但在实际项目中建议谨慎使用，因为这样会破坏组件的封装性。更好的做法是只传递需要的数据和方法。

4. 补充一个小技巧
可以使用@Input()结合setter来实现数据验证：

private _msg: string;
@Input()
set msg(value: string) {
if (value) this._msg = value;
}
get msg(): string { return this._msg; }


另外请教一下：
楼主的公众号具体是做什么内容的？是只发Angular相关文章还是包括其他技术？

再次感谢楼主的详细教程，对新手帮助很大！
頁: [1]
查看完整版本: Angular中父子组件之间父组件给子组件传值、传递方法、传递自己