zoukankan      html  css  js  c++  java
  • angular的父子组件的通信

    父组件给子组件传值-@input

    父组件

    home.html

    <app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header>
    <br/>
    <hr>
    <div>我是首页组件</div>

    homt.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() {
      }
      run(){
        alert("我是父组件的run方法");
      }
    }

    子组件header:

    header.html

    <p>头部组件!---{{msg}}</p>
    
    <button (click)="getParentMsg()">子组件里面获取父组件传入的msg</button>
    <br/>
    <button (click)="getParentRun()">子组件里面执行父组件的方法</button>

    header.ts

    import { Component, OnInit,Input } 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(){
        // this.run();
        alert(this.home.msg);
        this.home.run();
      }
    }

     父组件获取子组件的属性和方法:

    父组件new.html

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

    new.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 {
      @ViewChild('footer') footer:any;
      constructor() { }
    
      ngOnInit() {
      }
      getChildMsg(){
        alert(this.footer.msg);
      }
      getChildRun(){
        this.footer.run();
      }
    }

    子组件:

    footer.html

    <h2>我是footer子组件</h2>

    footer.ts

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-footer',
      templateUrl: './footer.component.html',
      styleUrls: ['./footer.component.scss']
    })
    export class FooterComponent implements OnInit {
    
      public msg:any="子组件的msg";
      constructor() { }
    
      ngOnInit() {
      }
      run(){
        alert("我是子组件的run方法");
      }
    
    }

    二、子组件通过@Output触发父组件的方法:

    父组件:

    .html

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

    .ts

    import { Component, OnInit} from '@angular/core';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
      run(e){
        console.log(e);//子组件给父组件广播的数据
        alert("我是父组件的run方法");
      }
    }

    子组件:

    .html

    <h2>我是footer子组件</h2>
    <button (click)="sendParent()">通过@Output给父组件广播数据</button>

    .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 {
      @Output() private outer=new EventEmitter();
      public msg:any="子组件的msg";
      constructor() { }
    
      ngOnInit() {
      }
      sendParent(){
        // alert("111");
        this.outer.emit("我是子组件的数据");
      }
    }

  • 相关阅读:
    poj 2763 Housewife Wind
    hdu 3966 Aragorn's Story
    poj 1655 Balancing Act 求树的重心
    有上下界的网络流问题
    URAL 1277 Cops and Thieves 最小割 无向图点带权点连通度
    ZOJ 2532 Internship 网络流求关键边
    ZOJ 2760 How Many Shortest Path 最大流+floyd求最短路
    SGU 438 The Glorious Karlutka River =) 拆点+动态流+最大流
    怎么样仿写已知网址的网页?
    5-10 公路村村通 (30分)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/12158895.html
Copyright © 2011-2022 走看看