组件传值
1. 父向子组件传值,和传递方法
父组件 app-home
子组件 app-header
// --- app-home.html 页面
<app-header [msg]="msg" [run]='run' [getDataFromChild]="getDataFromChild"></app-header>
// --- app-home.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './app-home.html', styleUrls: ['./app-home.css'] }) export class HomeComponent implements OnInit { public msg="我是home组件的msg"; constructor() { } ngOnInit() { } run(){ alert('这是home组件的run方法'); } getDataFromChild(childData){ /*父组件*/ alert(childData+"1111"); } }
// --- app.header.ts 页面
import { Component, OnInit,Input} from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './app-header.html', styleUrls: ['./app-header.css'] }) export class FooterComponent implements OnInit { @Input() msg; @Input() run; /*接收父组件传过来的run方法*/ @Input() getDataFromChild; public msginfo='这是子组件的数据'; constructor() { } ngOnInit() { } sendParent(){ /*子组件自己的方法*/ this.getDataFromChild(this.msginfo); /*子组件调用父组件的方法*/ } }
1.2 子组件用广播方式调用父组件方法
// --- app-home.html
<app-footer [msg]="msg" [run]='run' (toparent)="getDataFromChild"></app-footer>
// --- app-home.ts
import { Component, OnInit } from '@angular/core'; import {Http,Jsonp} from "@angular/http"; @Component({ selector: 'app-news', templateUrl: './app-home.html', styleUrls: ['./app-home.css'] }) export class NewsComponent implements OnInit { public msg="msg"; public name="张三"; public list=[]; constructor(private http:Http,private jsonp:Jsonp) { } ngOnInit() { } getDataFromChild(childData){ /*父组件*/ alert(childData+"1111"); } }
//--- app-header.ts
import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './app-header.html', styleUrls: ['./app-header.css'] }) export class HeaderComponent implements OnInit { @Input() msg:string; /*通过 Input 接收父组件传过来的msg*/ @Input() name:string; //EventEmitter实现子组件给父组件传值 @Output() toparent=new EventEmitter(); constructor() { } ngOnInit() {} //requestData requestData(){ //调用父组件的方法请求数据 this.toparent.emit('这是子组件的值'); } }
2. 父组件获取子组件值
// app-home.html
<app-header #header></app-header>
// app-home.ts
//ViewChild import { Component, OnInit, ViewChild } from "@angular/core"; @Component({ selector: "app-home", templateUrl: "./app-home.html", styleUrls: ["./app-home.css"] }) export class ProductComponent implements OnInit { @ViewChild("header") header; /*定义子组件 注意括号里面的东西和 #header 对应起来 */ constructor() {} ngOnInit() {} getChildData() { // this.header.run(); /*执行子组件的方法*/ alert(this.header.msg); /*获取子组件的数据*/ // alert(this.header.name); this.header.name = "我是父组件改变后的cart name"; } }
// app-header.ts
import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-header", templateUrl: "./app-header.html", styleUrls: ["./app-header.css"] }) export class CartComponent implements OnInit { constructor() {} public msg = "我是子组件的数据"; public name = "子组件"; ngOnInit() {} run() { alert("这是子组件的方法11"); } }
到你的博客走一趟,如同阳光洒在我脸上,心里暖洋洋!