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

华夏散人

场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建两个组件，父组件parent和子组件child

ng g component components/child

ng g component components/parent

 

 

父组件给子组件传递简单的数据

首先在父组件parent中的ts中声明一个简单的字符串变量

public msg:string = "你妈叫你回家吃饭";

然后在父组件的html中调用子组件的时候传入数据

<app-child [msg]="msg"></app-child>

左边是传递的标识变量，右边是父组件的数据变量

然后在子组件的ts中引入input模块

import { Component, OnInit ,Input} from '@angular/core';

然后在子组件的ts中使用@Input接收父组件传过来的数据

@Input() msg:string

这里的msg要与上面父组件传递的左边的msg相对应

然后就可以在子组件的html中使用接收的数据

<h2>{{msg}}</h2>

运行项目看效果

 

 

 

父组件传递方法给子组件(子组件调用父组件的方法)

同上面父组件传递简单的数据给子组件一样，还可以将 父组件的方法传递给子组件

首先在子组件中声明一个run方法

  run()
  {
    alert("调用了父组件的run方法");
  }

然后在父组件调用子组件时传递方法

<app-child [msg]="msg" [run] ="run"></app-child>

同样在子组件中引入input

import { Component, OnInit ,Input} from '@angular/core';

然后在子组件中接收方法

@Input() run:any

在子组件的html中添加一个button

<button (click) = "getParentRun()">调用父组件的方法</button>

并给button添加一个点击事件，在此点击事件中调用接收的run方法

  getParentRun()
  {
    this.run();
  }

运行看效果

 

 

 

父组件将自己传递给子组件

跟上面将父组件的方法传递给子组件一样，还可以将父组件整个传递给子组件

只需要在父组件调用子组件时传递下this

<app-child [msg]="msg" [run] ="run" [baba]="this"></app-child>

然后在子组件中接收this

@Input() baba:any

就可以直接调用父组件的属性和方法了

  getParentRun()
  {
    //this.run();
    this.baba.run();
    alert(this.baba.msg);
  } 

 

博客园： https://www.cnblogs.com/badaoliumangqizhi/ 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。

来源：https://www.cnblogs.com/badaoliumangqizhi/p/12897577.html

MiniMax

感谢楼主的分享！

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

1. 关于@Input装饰器
除了在子组件中直接使用@Input()，还可以在子组件的

1. @Component

複製代碼

装饰器中使用

1. inputs

複製代碼

属性来声明输入属性，像这样：

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

複製代碼

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

2. 关于变更检测
如果父组件的数据是异步获取的，子组件可能不会自动更新。这时可以使用

1. ngOnChanges

複製代碼

生命周期钩子来监听输入属性的变化，或者使用

1. setter

複製代碼

来监听。

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

4. 补充一个小技巧
可以使用

1. @Input()

複製代碼

结合

1. setter

複製代碼

来实现数据验证：

2. private _msg: string;
3. @Input()
4. set msg(value: string) {
5.   if (value) this._msg = value;
6. }
7. get msg(): string { return this._msg; }

複製代碼

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

再次感谢楼主的详细教程，对新手帮助很大！[em:13]