angular4父子组件间传值

水深无声 2022-03-31 08:13 308阅读 0赞

### 父组件向子组件传值   @Input ###

父组件：

father.template.html

father.component.ts

import { Component, OnInit } from '@angular/core';
    
    @Component({
        selector: 'cmt-father',
        templateUrl: './father.template.html'
    })
    export class FatherComponent implements OnInit {
        data: any = '我是传往子组件的值'
        ngOnInit() {
        }
    
        ngOnChanges() {
        }
    
    }

子组件：（使用@Input修饰器去接收）

childcomponent.ts

import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
        selector: 'cmt-child',
        templateUrl: './child.template.html'
    })
    export class ChildComponent implements OnInit {
        @Input() data: any;//接收父组件的值
        ngOnInit() {
            console.log(this.data)
        }
    
        ngOnChanges() {
            console.log(this.data)
        }
    
    }

这样就把值从父组件传到了子组件！

### 子组件向父组件传值（子组件通过方法借助修饰器@output传值给父组件） ###

子组件

child.template.html.html

<h1>子组件</h1>
    <button (click)='checkedCallback()'>点击传值给父组件</button>

childcomponent.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
    
    @Component({
        selector: 'cmt-child',
        templateUrl: './child.template.html'
    })
    export class ChildComponent implements OnInit {
        @Output('checked') checkedBack = new EventEmitter<any>();
        id:any ="我是传给父组件的值"
        ngOnInit() {
        }
    
        ngOnChanges() {
        }
        checkedCallback() {
            this.checkedBack.emit(this.id);
        }
    }

父组件

father.template.html

father.component.ts

import { Component, OnInit } from '@angular/core';
    
    @Component({
        selector: 'cmt-father',
        templateUrl: './father.template.html'
    })
    export class FatherComponent implements OnInit {
        ngOnInit() {
        }
    
        ngOnChanges() {
        }
        
        checkedBack(event) {
            console.log(event)
        }
    }

这样子组件通过点击就把值传递给了父组件！