zoukankan      html  css  js  c++  java
  • angular6之父子组件通信

    父组件向子组件传入数据

    例如将父组件的user对象传入子组件additem中
    <app-additem [user]=”user" #additem></app-additem>
    1、将父组件的user对象传入子组件additem中,组件模板中绑定属性[user]
    2、子组件中类中先导入user对象,之后就可以在组件中直接使用该对象
    @Input () user;

    父组件访问子组件的方法和数据
    方法一:
    <button (click)="additem.add()" nz-button type="primary">添加</button>
    <app-addItem [user]=“user #additem></app-addItem>
    通过在子组件标签上加上属性#<name>,那么在组件模板中就可以直接通过该名称调用子组件里的方法和属性。但是这种写法有局限性,只能在html模板中使用,父组件本身的ts代码中并不能使用

    方法二:
    父组件ts代码中调用子组件的方法和属性。
    首先导入模块ViewChild。
    import {ViewChild } from '@angular/core';
    在父组件的类中将子组件作为viewChild注入到父组件中
    @ViewChild(AdditemComponent)
    private additem: AdditemComponent
    在父组件的方法中就可以通过this.additem[方法/属性名]来调用子组件的方法或属性数据

    子组件调用父组件的方法

    子组件导出 EventEmitter 属性,通过emits方法,触发父组件中绑定的该属性的事件。
    具体用法:
    子组件中引入EventEmitter和Output 模块
    import { EventEmitter, Output } from '@angular/core';
    定义输出:
    @Output() addItem = new EventEmitter();

    触发:
    this.addItem.emit(this.user);
    父组件定义addItem事件
    <app-addItem (addItem)="onAdditem($event)"></app-addItem>
    当子组件emit触发父组件的自定义事件addItem时,会触发父组件的onAdditem方法

  • 相关阅读:
    LeetCode第三题:Longest Substring Without Repeating Characters
    LeetCode第二题:Add Two Numbers
    LeetCode第一题:Two Sum
    第五章 单体内置对象
    第五章 引用类型 基本包装类型
    第五章 引用类型 Function 类型
    第五章 引用类型 RegExp 类型
    第五章 引用类型 Date类型
    第五章 引用类型 Array类型
    第五章 引用类型 Object类型
  • 原文地址:https://www.cnblogs.com/leejay6567/p/9388228.html
Copyright © 2011-2022 走看看