Angular--组件传值

1 父子传递

1.1 父组件传递给子组件

1） 父组件 的 html 文件 引入子组件 并 传递数值给子组件

<!--父组件调用子组件search 传递给子组件 title 变量-->
<app-search [title]="'我是Home_Header'"></app-search>

2） 子组件search 的 逻辑文件 search.component.ts 文件引入 Input 依赖 接收 父组件传递的参数

import {Input} from '@angular/core';
​

@Input() title: any;

3） 子组件的html 文件 页面 渲染 变量

{{title}}----------

效果：

我是Home_Header----------

//把整个父组件传递给子组件

[title] = "this"

1.2 子组件传递给父组件

方法一： 主动获取

子组件传递给父组件信息 --------------------在父组件中通过获取子组件的dom节点信息 获得子组件的信息 具体参考 Angular--dom操作

方法二： 被动获取

1 子组件 引入Output 依赖 并实例化一个类似于监听器的 new EventEmitter<any>();

信号

@Output() outer = new EventEmitter<any>();

定义方法向父组件的信号检测端 传递数据 也就是 Search_Message 字符

sendMes() {
  this.outer.emit('Search_Message');
}

光定义不够 还得给子组件 定义触发该方法的 事件

比如给button 标签 绑定 click 事件

say() {
  this.sendMes();
}

至此 子组件的所有事项均已准备妥当 万事俱备 只欠东风

那么 父组件的东风又该如何筹借呢

我们需要在 父组件 引用 子组件的 标签中 增加一个 子组件实例化出来的信号检测器

<app-search
  (outer)="getMessage($event)"
  #searchComponent [title]="'我是Character_Header'"
>
</app-search>

当outer 信号检测器 监听到 子组件由于触发了 click 事件而向父组件 传递信号和数据

此刻调用父组件定义的getMessage 方法 并传入 子组件传递的数据 也就是 $event

getMessage(event) {
  console.log(event);
}

逻辑文件 此时 接收 参数 并将它打印出来

 

2： 非父子组件传值

创建组件之间共享的服务共享数据 具体参考 Angular--服务

vb7