我在Angular工作-
我正在尝试在值更改时更新子组件中的值 在父组件中
(因为值是从其他组件动态传递到父组件)。
我如何尝试
我尝试将数据从父组件传递到子组件 @Input装饰器
使用@Input值仅在组件加载时传递一次,并且 后者的价值未通过
我在下面共享我的代码
父组件
.html
<app-banner [tournamentType]='tournamentType'></app-banner>
.ts
子组件
.ts文件
import { Component, OnInit , Input } from '@angular/core';
import { ServicesService } from '../service/services.service';
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
@Input() tournamentType;
sportsType : any = 1;
constructor(private rest : ServicesService) { }
ngOnInit() {
console.log("this. is banner page" + this.tournamentType);
alert('hello');
this.loadDataFromApi(1);
}
loadDataFromApi(sportsType) {
this.rest.getbanner(this.sportsType).then(res => {
console.log('>>>$$$$$ banner >>>>>> $$$$$$$$$$');
console.log(' @Input tournamentType; ====' + this.tournamentType );
console.log(res);
})
console.log(sportsType);
}
}
答案 0 :(得分:2)
从父组件到子组件的值更改会立即反映出来。但是,您可以在子组件中监听值更改事件。进一步了解ngOnChanges
以下是stackblitz
上的示例app.component.html
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<app-child [data]="count"></app-child>
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';
count = 0;
constructor() {
}
ngOnInit(): void {
setInterval(()=> this.updateCount(), 1000);
}
updateCount(): void {
this.count++;
}
}
child.component.html
<p>
{{data}}
</p>
child.component.ts
import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
@Input() data: any;
constructor() { }
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges): void {
console.log('value changed', this.data);
}
}
答案 1 :(得分:1)
说这是您的父组件。
import { Component, ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit{
message = "hello again";
friends:string[] = [];
//will add friend to our list of friends array
add(friend){
if(friend.value){
this.friends.push(friend.value);
friend.value = "";
}
console.log(this.friends);
}
ngAfterViewInit() {
}
}
父组件用户界面
<div>
<input #friend type="text" placeholder="name of friend" />
<button type="button" (click)="add(friend)">add friend</button>
</div>
<app-to-child message="List of friends" [friends]="friends"></app-to-child>
现在的子组件
在要从其父组件接收数据的字段中使用@Input装饰器。
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-to-child',
templateUrl: './to-child.component.html',
styleUrls: ['./to-child.component.css']
})
export class ChildComponent implements OnInit {
@Input() message:string;
@Input() friends:string[];
constructor() { }
ngOnInit() {
}
//this will called when data is passed from parent to child.
ngOnChanges(val){
console.log("change detected");
console.log(val);
}
}
内部child.component.html
<h5>CHILD COMPONENT</h5>
<p>Message : {{message}}</p>
<div *ngFor="let friend of friends"> {{friend}}</div>
您可以快速了解有关component interactions
here的更多信息。