自定义组件

定义子组件:

1)ionic g compoment myHeader

引用组件:

在app.module.ts中

import { MyHeadComponent} from '../components/my-head/my-head';
declarations: [MyHeadComponent ]
父组件给子组件传值 -@Input
1)父组件中:
<app-header [title]="title"></app-header>
ts中this.title ="xxxxx";
2)子组件中:
<div>{{title}}</div>
ts中
import { Component , OnInit ,Input} from '@angular/core';
export class MyHeadComponent {
   @Input() title:string;
   constructor() {
    
   }
}
父组件给子组件传方法 -@Input
<app-header [run]="run"></app-header>
ts中
run(){
console.log("我是xxx");
}
2)子组件中:
ts中
import { Component , OnInit ,Input} from '@angular/core';
export class MyHeadComponent {
   @Input() run:any;
   constructor() {
    
   }
   ngOnInit() {
         this.run(); /*子组件调用父组件的 run 方法*/
  }
}
 
接收子组件传递过来的数据@Outpu
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/yuyedaocao/p/9000012.html