Angular 父子组件传值，非父子组件传值

深藏阁楼爱情的钟 2023-06-13 04:46 18阅读 0赞

## 一、子组件调用父组件，父组件给子组件传值 ##

引入Input

header.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
    
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {
    
      // 接收父组件传来的值
      // 传入父组件的值
      @Input() title:any;
      @Input() msg:any;
    
      // 传入父组件的方法
      @Input() run:any;
      // 传入父组件
      @Input() home:any;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      // 获取父组件的数据
      getParentMsg() {
        alert(this.msg);
      }
    
      getParentRun() {
        // 直接调用父组件，操作父组件
        console.log(this.home.msg);
        this.home.run();
        this.run();
      }
    }

header.component.html

<header>{
       {title}}</header>
    
    <button (click)="getParentMsg()">获取父组件传入的数据</button>
    <button (click)="getParentRun()">子组件中获取父组件的方法</button>

定义父组件，传入值

home.component.ts

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent implements OnInit {
    
      public title:string="首页组件的标题";
      public msg:string="我是父组件的msg";
    
      constructor() { }
    
      ngOnInit() {
      }
    
      getParentRun() {
        alert("我是父组件的方法");
      }
    }

home.component.html

<app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header>
    
    <br>
    
    <p>
        我是home
    </p>

## 二、父组件调用子组件 ##

2.1 通过@ViewChild进行调用

new.conponent.html

<app-footer #footer></app-footer>
    
    <br/>
    <hr/>
    <br/>
    <div>我是一个新闻组件</div>
    <button (click)="getChildMsg()">获取子组件的msg</button>
    <br/>
    <button (click)="doChildMethod()">执行子组件的方法</button>

new.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
    
      // 绑定id为footer的组件，并实例化为footer
      @ViewChild('footer',{static: false}) footer:any;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      // 调用子组件的变量
      getChildMsg() {
        alert(this.footer.msg);
      }
    
      // 调用子组件的方法
      doChildMethod() {
        this.footer.run();
      }
    }

### 2.2 使用@output触发父组件 ###

Output是通过事件驱动的方式，来让子组件触发父组件

footer.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
    
    @Component({
      selector: 'app-footer',
      templateUrl: './footer.component.html',
      styleUrls: ['./footer.component.scss']
    })
    export class FooterComponent implements OnInit {
    
      public msg:string = "我是子组件的msg"
    
      // 新建事件驱动
      @Output() public outer = new EventEmitter();
    
      constructor() { }
    
      ngOnInit() {
      }
    
      run() {
        alert("我是子组件的run方法");
      }
    
      sendParent() {
        // 给父组件广播数据
        this.outer.emit("我是子组件的数据");
      }
    }

footer.component.html

<div>我的子组件</div>
    
    <button (click)="sendParent()">子组件广播</button>

news.component.html

<app-footer #footer (outer)="getFromChild($event)"></app-footer>
    
    <br/>
    <hr/>
    <br/>
    <div>我是一个新闻组件</div>
    <button (click)="getChildMsg()">获取子组件的msg</button>
    <br/>
    <button (click)="doChildMethod()">执行子组件的方法</button>

news.component.ts

通过$event可以获取到子组件给父组件传递的数据。

<app-footer #footer (outer)="getFromChild($event)"></app-footer>

## 三、非父子组件传值 ##

通过服务或localstorage实现非父子组件通信。