全部
技术
PHP
MySQL
前端
Linux
JAVA
工具
纪念日计算器
邮记星
个人记账
笔记侠
历史上的今天
生日密码
生日书
生日密码
生日花语
博古通今
三十六计
鬼谷子
笑林广记
本草纲目
山海经
唐诗宋词
宋词300首
唐诗300首
退出
登录
注册
编辑文章
选择分类
PHP
MySQL
前端
Linux
Java
工具
选择专栏
设计模式
java基础
Angular学习
Java面试题
描述:
Angular8 子组件向父组件传递参数
封面图上传 :
+
点击上传图片
### Angular8 子组件向父组件传递参数 废话少说,上代码 #### 父组件 html 注意 (childSelectIndex)要和子组件output的名字一致 ```html
``` #### 父组件TS ```js import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-keepbook-index', templateUrl: './index.component.html', styleUrls: ['./index.component.less'] }) export class IndexComponent implements OnInit { constructor() { } ngOnInit() { } /** * 子组件和父组件通信 * @param event */ onChildSelectIndexChange(event){ console.log(event); } } ``` #### 子组件TS 关键代码,向父组件传值 ``@Output() childSelectIndex : EventEmitter
= new EventEmitter();`` ```js import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'keepbook-add', templateUrl: './add.component.html', styleUrls: ['./add.component.less'] }) export class AddComponent implements OnInit { // @Output() childSelectIndex : EventEmitter
= new EventEmitter(); constructor() { } ngOnInit() { } /** 调用该方法传递值给父组件 **/ onOk() { this.childSelectIndex.emit('传递给父组件的值'); } } ```
保存文章