Angular学习笔记之-3.组件之间的交互

最新推荐文章于 2023-01-03 18:36:33 发布
最新推荐文章于 2023-01-03 18:36:33 发布
阅读量161 收藏 1
点赞数
分类专栏： Angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43413047/article/details/113127307
版权

组件之间的交互

1.通过输入型绑定把数据从父组件传到子组件
2.通过 setter 截听输入属性值的变化 -类似于vue的watch(监听单个(输入)属性的变化)
3.通过ngOnChanges()来截听输入属性值的变化-当需要监视多个、交互式输入属性的时候，本方法比用属性的 setter 更合适
4.父组件监听子组件的事件
5.父组件与子组件通过本地变量互动
6.父组件调用@ViewChild()
7.父组件和子组件通过服务来通讯

通过输入型绑定把数据从父组件传到子组件

  1. 关键词 @Input()

  2. 相关代码

        import { Component, Input, OnInit } from '@angular/core';

    interface Hero {
    id: number;
    name: string;
    }

    @Component({
    selector: 'app-input-data-parent',
    template: `
        <ul>
        <li *ngFor="let hero of heros; let key = index">
            <app-input-data-chilren 
            [name]="hero.name"
            [martek] = "martek"
            ></app-input-data-chilren>
        </li>
        </ul>
    `,
    })
    export class InputDataParentComponent implements OnInit {
    heros: Hero[] = [];
    martek: string = 'market';
    constructor() {}

    ngOnInit(): void {
        this.heros = [
        {
            id: 0,
            name: 'hero-1',
        },
        {
            id: 1,
            name: 'hero-2',
        },
        {
            id: 2,
            name: 'hero-3',
        },
        ];
    }
    }

    @Component({
    selector: 'app-input-data-chilren',
    template: ` <h1>{{ name }}----{{marketName}}</h1> `,
    })
    export class InputDataChilrenComponent implements OnInit {
    @Input() name: string;
    @Input('martek') marketName:string
    constructor() {}

    ngOnInit(): void {}
    }


}

通过 setter 截听输入属性值的变化

  1. 关键词 @Input() getXXX(){} setXXX(){} public _XXX = ‘’

  2. 相关代码

        import { Component, Input, OnInit } from '@angular/core';

    @Component({
    selector: 'app-set-data-parent',
    template: `
        <div>
        <app-set-data-chilren [martek]="martek"></app-set-data-chilren>
        <button (click)="increaseMarket()">change martek value</button>
        </div>
    `,
    })
    export class SetDataParentComponent implements OnInit {
    martek: string = 'market';
    constructor() {}

    ngOnInit(): void {}

    increaseMarket() {
        this.martek += '1';
    }
    }

    @Component({
    selector: 'app-set-data-chilren',
    template: ` <h1>{{ martek }}</h1> `,
    })
    export class SetDataChilrenComponent implements OnInit {
    
    @Input()
    get martek(): string {
        return this._martek;
    }

    set martek(name: string) {
        // this._martek = name
        this.setMartek(name);
    }

        public _martek = '';
    
    constructor() {}

    ngOnInit(): void {}

    setMartek(name: string) {
        console.log('name:', name);
        this._martek = '%%%%' + name;
    }
}

3.该属性可以用于

通过ngOnChanges()来截听输入属性值的变化

  1. 关键词 SimpleChanges

  2. 相关代码

        import {
    Component,
    Input,
    OnInit,
    SimpleChanges,
    } from '@angular/core';

    @Component({
    selector: 'app-onchanges-data-parent',
    template: `
        <div>
        <app-onchanges-data-chilren
            [martek]="martek"
            [counter]="counter"
        ></app-onchanges-data-chilren>
        <button (click)="increaseMarket()">change martek value</button>
        <button (click)="increaseCounter()">change martek value</button>
        </div>
    `,
    })
    export class ChangesDataParentComponent implements OnInit {
    martek: string = 'market';
    counter: number = 0;
    constructor() {}

    ngOnInit(): void {}

    increaseMarket() {
        this.martek += '1';
    }

    increaseCounter() {
        this.counter++;
    }
    }

    @Component({
    selector: 'app-onchanges-data-chilren',
    template: `
        <h1>{{ martek }}</h1>
        <h1>{{ counter }}</h1>
        <ul>
        <li *ngFor="let log of logs; let key = index">
            {{ key + 1 }} --- {{ log }}
        </li>
        </ul>
    `,
    })
    export class ChangesDataChilrenComponent implements OnInit {
    @Input() martek: string;
    @Input() counter: number;
    logs: string[] = [];
    constructor() {}

    ngOnInit(): void {}

    ngOnChanges(changes: SimpleChanges): void {
        console.log('changes:', changes);
        for (let key in changes) {
        if (!changes[key].firstChange) {
            const str = `key Changes 从${changes[key].previousValue} 变成了 ${changes[key].currentValue}`;
            this.logs.push(str);
        }
        }
    }
}

父组件监听子组件的事件

  1. 关键词 @Output() addMartek = new EventEmitter() and 事件按绑定

  2. 相关代码

       import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

    @Component({
    selector: 'app-output-data-parent',
    template: `
        <div>
        <app-output-data-chilren
            [martek]="martek"
            (addMartek)="addMartek($event)"
        ></app-output-data-chilren>
        </div>
    `,
    })
    export class OutputDataParentComponent implements OnInit {
    martek: string = 'market';
    constructor() {}

    ngOnInit(): void {}

    addMartek(value: string) {
        this.martek = value[0];
    }
    }

    @Component({
    selector: 'app-output-data-chilren',
    template: `
        <h1>{{ martek }}</h1>
        <button (click)="changeMartek()">change martek <button></button></button>
    `,
    })
    export class OutputDataChilrenComponent implements OnInit {
    @Input() martek: string;
    @Output() addMartek = new EventEmitter();

    constructor() {}

    ngOnInit(): void {}

    changeMartek() {
        const myMarek: string[] = [this.martek + 1];
        console.log('myMarek:', myMarek);
        this.addMartek.emit(myMarek);
    }
}

父组件与子组件通过本地变量互动

  1. 关键词 模板上绑定子组件的引用

  2. 相关代码

        import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'app-local-data-parent',
    template: `
        <div>
        <app-local-data-chilren
            #local
        ></app-local-data-chilren>
        <h1>{{ local.marktek }} ==== {{ local.counter }}</h1>
        <button (click)="local.newMarket()">change martek value</button>
        <button (click)="local.newCounter()">change counter value</button>
        </div>
    `,
    })
    export class LocalDataParentComponent implements OnInit {
    constructor() {}

    ngOnInit(): void {}
    }

    @Component({
    selector: 'app-local-data-chilren',
    template: `
        <h5>{{ marktek }}</h5>
        <h5>{{ counter }}</h5>
    `,
    })
    export class LocalDataChilrenComponent implements OnInit {
    ngOnInit(): void {}

    public marktek: number = 100;
    public counter: number = 2;

    newMarket() {
        this.marktek += 10;
    }

    newCounter() {
        this.counter++;
    }
}

父组件调用@ViewChild()—本地变量的升级版

  1. 关键词 @ViewChild() ngAfterViewInit()

  2. 相关代码

        import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';

    @Component({
    selector: 'app-viewChild-data-chilren',
    template: `
        <h5>{{ marktek }}</h5>
        <h5>{{ counter }}</h5>
    `,
    })
    export class ViewChildDataChilrenComponent implements OnInit {
    ngOnInit(): void {}

    public marktek: number = 100;
    public counter: number = 2;

    newMarket() {
        this.marktek += 10;
    }

    newCounter() {
        this.counter++;
    }
    }

    @Component({
    selector: 'app-viewChild-data-parent',
    template: `
        <div>
        <app-viewChild-data-chilren></app-viewChild-data-chilren>
        <h1>{{ marktek }}</h1>
        <button (click)="parentMarket()">in parent change martek value</button>
        <button (click)="newMarket()">change martek value</button>
        <button (click)="newCounter()">change counter value</button>
        </div>
    `,
    })
    export class ViewChildDataParentComponent implements AfterViewInit {
    //   public marktek: number;
    get marktek() {
        return this._marktek;
    }

    set marktek(value: number) {
        this._marktek = this.local.marktek = value;
    }

    public _marktek: number;

    @ViewChild(ViewChildDataChilrenComponent)
    public local: ViewChildDataChilrenComponent;
    constructor() {}

    ngAfterViewInit() {
        // console.log('this.local:', this.local);
        setTimeout(() => {
        this.marktek = this.local.marktek;
        }, 0);
    }

    parentMarket() {
        this.marktek = 10000;
        // this.local.marktek = 10000;
    }

    newMarket() {
        this.local.newMarket();
    }

    newCounter() {
        this.local.newCounter();
    }
    }

  3. 注意事项
    1.需要在 ngAfterViewInit() 生命周期函数中去获取子组件
    2.在父组件中可以引用到子组件的属性和方法
    3.在父组件中可以改变子组件的属性值和调用子组件的方法
    4.注意父组件的视图更新,当父组件的属性错过此次checked之后改变的话需要setTimeout()等待下一轮视图更新

父组件和子组件通过服务来通讯

  1. 关键词 @ViewChild() ngAfterViewInit()

  2. 相关代码

    
    /* @/src/app/service-data/service-data.service.ts */
    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs';

    @Injectable()
    export class MessageService {

    // Observable string sources
    public messageService = new Subject<string>();
    public initMessageService = new Subject<string>()

    // Observable string streams
    setMessage$ = this.messageService.asObservable();
    initMessage$ = this.initMessageService.asObservable()

    // Service message commands
    setMessage(mission: string) {
        this.messageService.next(mission);
    }

    initMessage(astronaut: string) {
        this.initMessageService.next(astronaut);
    }
    }

    /* @/src/app/service-data/service-data.component.ts */
    import { stringify } from '@angular/compiler/src/util';
    import { Component, Input, OnInit } from '@angular/core';
    import { MessageService } from './service-data.service';

    @Component({
    selector: 'app-service-data-parent',
    providers: [MessageService],
    template: `
        <div>
        <app-service-data-chilren
            *ngFor="let child of childList; let key = index"
            [myObj]="child"
            [key]="key"
        ></app-service-data-chilren>
        <ul>
            <li *ngFor="let mes of messageList">
            {{ mes }}
            </li>
        </ul>
        <button (click)="clear()">clear history</button>
        </div>
    `,
    })
    export class ServiceDataParentComponent implements OnInit {
    public childList: any[] = [
        {
        name: 'child-1',
        },
        {
        name: 'child-2',
        },
        {
        name: 'child-3',
        },
    ];
    public messageList: string[] = [];
    constructor(public messageService: MessageService) {}

    ngOnInit(): void {
        this.wathcAndGetMessageList();
    }

    wathcAndGetMessageList() {
        this.messageService.setMessage$.subscribe((message) => {
        this.messageList.push(message);
        });
    }

    clear() {
        this.messageList = [];
        this.messageService.initMessage('clear');
    }
    }

    @Component({
    selector: 'app-service-data-chilren',
    template: `
        <h1>{{ myObj.name }} say</h1>
        <h3>I am {{ key + 1 }}</h3>
        <h2>{{ message }}</h2>
        <button (click)="set()">set history</button>
    `,
    })
    export class ServiceDataChilrenComponent implements OnInit {
    @Input() myObj: any;
    @Input() key: number;
    public setMessage: any;
    public initMessage: any;
    public message: string = '';

    constructor(public messageService: MessageService) {}

    ngOnInit(): void {
        this.watchSetMessage();
        this.watchInitMessage();
    }
    watchSetMessage() {
        this.setMessage = this.messageService.setMessage$.subscribe((message) => {
        this.message = message;
        });
    }

    watchInitMessage() {
        this.initMessage = this.messageService.initMessage$.subscribe((message) => {
        this.message = '';
        });
    }

    set() {
        this.messageService.setMessage(`${this.myObj.name} set message`);
    }

    ngOnDestroy() {
        this.initMessage.unsubscribe();
        this.setMessage.unsubscribe();
    }
}

  3. 注意事项
    1.如果组件的生命周期与应用的生命周期不同，需要在 ngOnDestroy()中销毁，以免造成内存泄漏

kwok_球球
关注
专栏目录
详解Angular6学习笔记之主从组件
10-18
主从组件，也称为父子组件，指的是一个组件（父组件）包含并控制另一个组件（子组件），父组件可以向子组件传递数据，子组件则负责处理特定的用户交互或呈现特定的视图内容。本文将详细讲解在Angular6中如何创建和...
uni-app父组件向子组件传递参数
qq_31277409的博客
09-28 2493
创建子组件 <template> <!-- 把 props中的src看成是data中的变量一样来使用--> <image :src="src"></image> </template> <script> export default { name: "img-border", //声明一下要接收的 父组件传递过来的属性 props:{ src:String } } &lt.
uniapp父页面向子页面传递多个参数问题
小阿兜的博客
07-30 4756
父页面内容： <view class="title" @tap="changeName(house.idx,house.Name)"> <view >{{ house.Name }}</view> </view> changeName(id, name) { console.log(id, name) uni.navigateTo({ url: '../../pages/houses/changeHouseName?houseIdx='
如何在uni-app项目中实现多个自定义vue子组件与父vue页面之间传递参数
zhengzizhi的专栏
05-03 1708
范例项目结构如下： 父页面chat/chat.vue代码如下： <template> <view class="content"> <chat-room :selectedUser="selectedUser"></chat-room> <!-- 监听事件@chooseuser="toggleUser"等价与 v-on:ch...
iframe嵌套页面传值
热门推荐
一只想躺平却不敢躺平的小菜鸟
01-03 1万+
iframe页面嵌套传值
vue/uniapp项目 url中传递数组参数
漫天随飞雪的博客
09-15 7793
问题：就是我往url传递数组参数的时候，接受到的是[object object]，这使我读不出我传递的参数 解决方案如下： 1：vue项目： 　传递参数的页面 let testArray = [{a:1},{b:2},{c:3}]; let testStr = encodeURIComponent(JSON.stringify(footerData));//JSON.stringify(数组)来把这个数组变成一个字符串 iframeSrc = "http://www.123.com/#/credi
Angular2学习笔记之数据绑定的示例代码
08-28
在Angular2中，数据绑定是框架的核心特性之一，它允许组件的视图和模型之间进行交互。本文将详细解析Angular2的数据绑定概念，并通过示例代码进行演示。 首先，我们来看最基础的插值表达式。插值表达式使用双大括号...
angluo-javascript-341240.pdf.zip
最新发布
04-07
如果“java”指的是JavaScript的学习路径或相关资源，那么这个压缩文件可能包含了JavaScript的学习笔记、教程资料或者代码示例。 总的来说，这个名为《angluo-javascript-341240.pdf.zip》的压缩包可能是一个关于...
6-10.rar web前端笔记
07-04
**前端框架和库**：如果笔记深入到高级主题，可能会介绍流行的前端框架和库，如React、Vue或Angular，它们简化了组件化开发和状态管理，让大型项目更易于维护。另外，jQuery是一个广泛使用的JavaScript库，简化了DOM...
详解Angular2学习笔记之Html属性绑定
08-28
总结起来，Angular2的属性绑定、CSS类绑定和Style属性绑定为我们提供了强大的能力，能够根据组件的状态动态更新UI，创造出高度交互的应用程序。理解并熟练运用这些特性是成为Angular开发者的必备技能。通过实际项目...
uniapp组件的使用
Lin_25937的博客
11-30 648
uniapp组件的分类和图片的操作
uniapp父组件使用prop将异步的数据传给子组件
m0_60067558的博客
08-06 923
无
uniapp DOM组件的异步更新问题，参数绑定后无效
zhanglei892721的博客
12-11 1161
简单理解Vue中的nextTick 一、示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <div v-if="msg2">Message got ins
uniapp中父组件向子组件传递Boolean类型的值
weixin_45803990的博客
01-29 2211
日常记录遇到的问题。 父组件向子组件传递Boolean类型的数据，使用 :isShow="true" （原本写的直接是isShow=false 结果发现不生效，打印下才发现这样写传递的是String类型的数据） （1）子组件中的定义 isShow:{ type:Boolean, default:true } （2）父组件中传递数据。 <card :isShow="false"></card> ...
uni-app相关：创建组件，父子组件传参
qq_39483453的博客
10-22 222
创建子组件 在 components 目录下新建模块，并新建组件文件，如图 编写组件内容，设置传参变量列表 props，如图的result 父组件中调用 引入子组件 import test_component from "../../components/test/test_component.vue" 在父组件内如图调用并传参 ...
setData数据量传输限制，导致小程序卡顿
weixin_48180838的博客
03-25 1675
2021 / 3 / 25 setData修改变量 setData设置数据量是有限的，单次设置的数据大小不得超过1024kb，否则就会出现卡顿。 比如: 当触底加载的时候，每次数据都是老数据加上新获取的数据，然后一起通过setData提交并重新渲染页面。因为是所有数据重新渲染，当数据过大的时候就会出现卡顿情况。 解决方案 每次setData数据，只存放新的数据 eg: data: { nowPage: 0, list: [] } getListData() { let newList = [...];
uniapp组件传值的方法(父传子，子传父，对象传值)案例
weixin_45745641的博客
11-29 1万+
最近看到uniapp组件传值的方法，这里记录一下，学过vue的应该都觉得很简单，传值的方法基本与vue的写法差不多。
uni-app入门:自定义组件实现父子组件参数传递
weixin_43401380的博客
11-28 5630
uni-app入门实战:自定义组件实现父子组件参数传递
uni-app 组件定义使用及父子组件传值
qq_45784580的博客
03-12 2987
组件定义使用 在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。 <template> <view class="phone"> <!-- <uni-coms /> --> <uni-coms ></uni-coms> //第三步：使用组件（这里单标签双标签都可以） &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值