angular 父组件和子组件

angular4中父组件如何传递子组件的方法

原文链接

https://blog.youkuaiyun.com/u012396955/article/details/78852140

  • 子组件ts

export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  greeting(name:string){
    console.log('hello'+name);
  }
}
  • 父组件模板
<!--1.在控制器里用typescript代码实现-->
<app-child #child1></app-child>

<!--2.在模板上用模板变量实现-->
<app-child #child2></app-child>
<button (click)="child2.greeting('**Jerry**')">按钮调用child2的greeting方法</button>
  • 父组件调用
export class AppComponent implements OnInit{

  @ViewChild('child1')
  child1:ChildComponent;

  ngOnInit(): void {
    this.child1.greeting('*tom*');
  }
  }
  • 结果
hello *tom*
hello  **jerry**

子组件传递父组件

原文链接
https://blog.youkuaiyun.com/qq_36547601/article/details/84345080

  • 父组件实现test()方法
  • 在插座中自定义一个事件
  • 子组件通过@Output()实现一个自定义事件
  • 子组件调用该自定义事件的方法

父组件ts

test(){
alert('我是父组件的alert方法')
}

父组件html

<app-child (test)='test()'></app-child>

子组件ts

@output() test = new ElementRef();
   doFatherMethod(){
     this.test.emit();
   }

父子组件传值@input@output @ViewChild

原文链接
https://blog.youkuaiyun.com/u013318615/article/details/78963060

ViewChild主动获取数据

//在子组件中引入viewchild
import { ViewChild } from '@angular/core';
@ViewChild("index") index;
// html中引用组件
<app-index #index></app-index>
<button (click)="parentClick()">调用index中的方法</button>
// ts文件中使用子组件的方法和数据
parentChild()
{
    this.index.childRun();
}

最终可看

### Angular父组件通过输入绑定修改子组件数据 在 Angular 中,父组件可以通过 `@Input` 装饰器将数据传递给子组件。这种机制允许父组件动态更新子组件的状态或行为。 #### 1. 使用 `@Input` 绑定实现父子组件之间的数据传递 当父组件需要向子组件传递数据时,可以在子组件中定义一个带有 `@Input` 的属性,并将其绑定到父组件的模板中[^1]。以下是具体实现方式: ##### 子组件代码 (`header.components.ts`) ```typescript import { Component, Input } from '@angular/core'; @Component({ selector: 'app-header', template: `<h1>{{ value }}</h1>`, }) export class HeaderComponent { @Input() value!: string; // 定义一个字符串类型的输入属性 } ``` ##### 父组件代码 (`home.component.ts`) ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-home', template: ` <button (click)="updateChildValue()">更新子组件数据</button> <app-header [value]="childData"></app-header> `, }) export class HomeComponent { childData: string = '初始值'; // 初始值设置为“初始值” updateChildValue(): void { this.childData = '新的值'; // 更新子组件的数据 } } ``` 在这个例子中,父组件通过 `[value]="childData"` 将其自身的 `childData` 属性绑定到了子组件的 `@Input()` 属性上。每当父组件更改 `childData` 值时,子组件会自动接收到新值并重新渲染界面[^4]。 --- #### 2. 动态更新子组件的行为 除了简单的数据传递外,还可以通过 `@Input` 向子组件传递函数或其他复杂对象。例如,在子组件中可以这样定义: ##### 子组件代码 (`header.components.ts`) ```typescript import { Component, Input } from '@angular/core'; @Component({ selector: 'app-header', template: `<p><strong>{{ message }}</strong></p>`, }) export class HeaderComponent { private _message: string = ''; @Input() set setMessage(value: string) { this._message = value; console.log(`子组件接收到的新消息:${this._message}`); } get message(): string { return this._message; } } ``` 在这种情况下,父组件仍然可以通过绑定的方式动态更新子组件的消息内容[^3]。 --- #### 3. 双向绑定扩展(可选) 如果希望进一步增强交互能力,可以考虑使用双向绑定 `(ngModel)` 或者自定义事件来同步父组件子组件之间的状态变化[^5]。 ##### 自定义事件示例 ```html <app-child [(myProperty)]="parentProperty"></app-child> ``` 上述语法实际上是两个单向绑定的组合: - `[myProperty]="parentProperty"` 表示从父组件子组件传递数据; - `(myPropertyChange)="parentProperty=$event"` 表示从子组件父组件发送通知。 --- ### 总结 通过 `@Input` 模板绑定技术,Angular 提供了一种简单而强大的方式让父组件能够控制子组件的行为显示内容。无论是基本类型还是更复杂的结构化数据,都可以轻松完成跨组件间的通信。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值