angular 4+中关于父子组件传值的示例
home.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { constructor() { } ngOnInit() {
} app_substring: string = "<app-subcomponet [msg]='msg' [parentFun]='parentFun'></app-subcomponet>";
app_substringtwo:string="在parent.component的模板中使用 <app-subcomponet (childbroadcastevent)=parentsubcribe($event)"; }
header.component.html <!-- <p>header works!</p> -->
<h1 class="header">this is {{msg}}</h1>
<hr />
<button (click)='childFun()'>调用父组件的方法</button>
<button (click)='childOutFun()'>子组件广播事件向父组件传值</button>
<hr />
<!-- ----------------header data--------------------
{{title}}---{{msg}} -->
header.component.ts import { Component, OnInit, Input, OnDestroy, OnChanges, Output, EventEmitter } from '@angular/core';
// import { EventEmitter } from 'protractor'; @Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy, OnChanges {
title = 'this is header\'s title'; //模板参数定义方式,注意,input传入的是对象,即可以是属性,还可以是方法 ///接收父组件的属性
@Input() msg: string; @Input() parentFun: any; @Output() childOut = new EventEmitter<string>(); message: string; constructor() {
console.log('constructor...' + this.msg);
} ngOnInit() {
// this.msg = 'this is header data'
console.log('ngOnInit...' + this.msg);
} ngOnDestroy() {
console.log('ngOnDestroy...' + this.msg);
} ngOnChanges() {
console.log('ngOnChanges...' + this.msg);
} childFun() {
this.message = '这是header传给父组件的参数';
this.parentFun(this.message);
} ///子组件定义一个output的属性,来作为父组件的引用,进行广播
///父组件通过,监听这样一个子组件的广播属性,来响应子组件的操作 注意:由于是事件,所以用 ()
childOutFun() {
this.childOut.emit('子组件向父组件广播的emitdata');
} childFunForParent() {
alert('供父组件调用的方法');
}
}
news.component.ts import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'; @Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit, AfterViewInit {
@ViewChild('headerchild', { read: '', static: true }) headerchild;
public news: any[];
protected spanhtml: string = '<h2>测试显示HTML代码,是否能解析成功</h2>';
protected id: Number = 100; public search: string = '';
public msg: string = '这是news的Header'; constructor(private http: HttpClient) {
this.news = [
{
'cateName': '宝马',
'brand': [{ 'title': '宝马X1' },
{ 'title': '宝马X1' },
{ 'title': '宝马X2' },
{ 'title': '宝马X3' },
{ 'title': '宝马X4' }]
},
{
'cateName': '奥迪',
'brand': [{ 'title': '奥迪q1' },
{ 'title': '奥迪q2' },
{ 'title': '奥迪q3' },
{ 'title': '奥迪q4' },
{ 'title': '奥迪q5' }]
},
{
'cateName': '中华',
'brand': []
}
];
}
ngOnInit() {
} ngAfterViewInit() { } getApiData() {
let url: string = 'https://itunes.apple.com/search';
let searchUrl = `${url}?term=${this.search}&media=music&limit=20`;
this.http.jsonp(url, 'callback').subscribe(
function (data) { console.log(data) },
function (error) { console.log(error) })
} ///父组件通过属性传值公开给子组件的方法
parentFun(msg) {
alert(msg);
} ///父组件监听的子组件方法
parentAimedFun(e) {
alert(e);
} ////父组件通过viewchild直接调用子组件的方法
excuteChildFunByViewChild() {
this.headerchild.childFunForParent();
} }
news.component.html <app-header [msg]='msg' [parentFun]='parentFun' (childOut)='parentAimedFun($event)' #headerchild></app-header> <button (click)="headerchild.childFunForParent()">试试父组件执行子组件方法</button>
<button (click)="excuteChildFunByViewChild()">试试父组件通过viewchild执行子组件方法</button> <br>
<p>news works!</p>
<span [innerHTML]="spanhtml"></span>
<div [id]="id"></div> <div>
<ul>
<li *ngFor="let item of news;let key=index">
系列:{{item.cateName}}<br>
车型数量:{{item.brand.length}}
<ol>
<div *ngIf="item.brand.length>0">
<li *ngFor="let car of item.brand;let key=index">
车型:{{car.title}}
</li>
</div>
<div *ngIf="item.brand.length==0">
暂无更多数据
</div>
</ol>
</li>
</ul>
</div> <hr />
<h2>Jsonp查询数据</h2>
输入关键字:<input type="text" [(ngModel)]="search" />
<button (click)="getApiData()">点击查询</button>
angular 4+中关于父子组件传值的示例的更多相关文章
- Angular 父子组件传值
Angular 父子组件传值 @Input @Output @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...
- 关于element中的父子组件的传值问题
首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...
- 十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值
一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
随机推荐
- (转)linux中wget未找到命令
转:https://blog.csdn.net/djj_alice/article/details/80407769 在装数据库的时候发现无法使用wget命令,提示未找到命令,如图所示 那是因为没有安 ...
- Ubuntu下qt5使用vlc
一:Ubuntu下在线安装qt5,同时安装了qt creator 二:打开终端执行sudo apt-get install libvlc5 libvlc-dev libvlccore-dev 安装 ...
- VNC Viewer配置
VNC概述 VNC (Virtual Network Computing)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在 ...
- synchronized三种使用方式,及锁的类型验证
Synchronized常用三种使用方式 1.修饰普通方法:锁对象即为当前对象 2.修饰静态方法:锁对象为当前Class对象 3.修饰代码块:锁对象为synchronized紧接着的小括号内的对象 一 ...
- android data binding jetpack IV 绑定一个方法另一种写法和参数传递
android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...
- leetcode-hard-array-76. Minimum Window Substring -NO
mycode 不会.. 参考: class Solution(object): def minWindow(self, s, t): """ :type s: str : ...
- list元素按照日期排序
private static void ListSort(List<AppClassInfoVo> list) { Collections.sort(list, new Comparato ...
- vue-cli构建的项目结构解析
参考: https://www.jianshu.com/p/32beaca25c0d
- SQL Server 数据库设计、命名、编码规范
https://blog.csdn.net/songguozhi/article/details/5858159 SQL Server 数据库设计.命名.编码规范
- Node某个JS导出方法变量以及在其他地方引用的例子
//modelJs.js var name="miyue"; function doSomething() { console.log("做一些事情"); } ...