9/29angular组件交互

本文详细介绍Angular中父组件与子组件间的数据传递方法,包括@Input、@Output、EventEmitter及ViewChild的使用技巧,帮助开发者掌握组件间通信的核心技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、父组件传给子组件

1、子组件接收父组件传入的数据

在子组件中,用@input标记要从父组件获取的数据变量名,@input() hero:HERO[],父组件的html模板中用[子组件变量名] = "父组件变量名"绑定

example:

父组件:

   

子组件

2、用set 和get来处理父组件传入的数据,和第一种的区别就是set相当于用一个函数处理了一下传入数据,再用get返回

父组件传入的是name变量

<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>

其中names的值是,带有一个是空格的名字
names = ['Mr. IQ', '   ', '  Bombasto  '];

子组件set name()和get name()的name要和父组件传绑定对的变量名一致

@Component({
  selector: 'app-name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  private _nam = '';

  @Input()
  set name(name1: string) {
    this._nam = (name1 && name1.trim()) || '<no name set>';
  }

  get name(): string { return this._nam; }
}

3、用onChanges,

ngOnchanges在父组件初始化或修改子组件的输入参数下调用,用在有输入属性的子组件上。

(转载https://blog.youkuaiyun.com/baobab_cc/article/details/79227862

在什么情况下调用?:当修改子组件参数时,只有以下情况ngOnchanges才会被调用

  • 子组件的参数为输入属性且为不可变对象变化
    • 输入属性:@Input()属性
    • 不可变对象:原始值(undefined、null、布尔值、数字和字符串)
    • 可变对象:对象(包括数组和函数)

只有修改不可变对象时才会调用 onChanges,调用可变对象时不会调用。和前两种不同,前两种趋向于静态的,onChanges是动态的,父组件参数会改变,子组件随父组件改变

二、子组件传给父组件,@Output和EventEmitter<>(),emit

1、通过事件来交互

父组件html模板中的子组件,voted来自子组件,是一个事件发射器,onVoted是父组件的,处理子组件发射到父组件的事件。
<app-voter *ngFor="let voter of voters"
      [name]="voter"
      (voted)="onVoted($event)">

子组件代码
 @Output() voted = new EventEmitter<boolean>();
 
  vote(agreed: boolean) {
    this.voted.emit(agreed);
    this.didVote = true;
  }

2、#方法插在子组件标签里代表子组件名

父组件不能通过数据绑定使用子组件的 start 和 stop 方法,也不能访问子组件的 seconds 属性。

把本地变量(#timer)放到(<countdown-timer>)标签中,用来代表子组件。这样父组件的模板就得到了子组件的引用,于是可以在父组件的模板中访问子组件的所有属性和方法。

直接在父组件创建一个timer变量指代子组件,就可以访问所有子组件中的方法???什么鬼啊
<button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
  <app-countdown-timer #timer></app-countdown-timer>

3、用viewChild

4、通过服务,不同组件之间交互

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值