برای ارسال مقدار فیلدها در انگولار از والد به فرزند به راحتی در کامپوننت پدر مقدار درون تگ بایند میشود ودر کامپوننت فرزند فیلد به صورت Import@ دریافت میشود.
به عنوان مثال میشه یک آرایه رو از کامپوننت والد پر کرد و فرستاد توی کامننت فرزند و نمایش داد.
ارسال از کامپوننت والد به فرزند
کامپوننت والد
@Component({ selector: 'app-root', template:'<display-error-messages [messages]="errorMessages"></display-error-messages>' }) export class AppComponent { public constructor() { this.errorMessages = [ 'Error Message 1', 'Error Message 2', 'Error Message 3', ]; } public errorMessages: string[]; }
@Component({
selector: 'display-error-messages',
template:
`<div class="alert alert-danger">
<ul>
<li *ngFor="let item of messages">{{ item }}</li>
</ul>
</div>`
})
export class DisplayErrorMessagesComponent {
public constructor() {
@Input() public messages: string[]
}
@Component({ selector: 'app-child', template: `<h3>I'm Child!</h3> <button type="button" (click)="onClick()">Click Me!</button>`, }) export class ChildComponent { public constructor() { } @Output() public insideButtonClick = new EventEmitter(); public onClick(): void { this.insideButtonClick.emit(`This Message Sent By Child!`); } }
@Component({ selector: 'app-root', template: `<h1>I'm Parent:</h1>Message: {{ message }} <hr> <app-child (insideButtonClick)="doSomething($event)"></app-child> `, }) export class AppComponent { public constructor() { this.message = `First Message!`; } public message: string; public doSomething(sentMessage: string): void { this.message = sentMessage; } }
import { OnInit } from '@angular/core'; import { Output } from '@angular/core'; import { Component } from '@angular/core'; import { EventEmitter } from '@angular/core'; @Component({ selector: 'child-app', templateUrl: './child-app.component.html', styleUrls: ['./child-app.component.css'] }) export class ChildAppComponent implements OnInit { constructor() { } @Output() public myEmitter = new EventEmitter(); public ngOnInit() { setInterval(() => { this.myEmitter.emit(); }, 1000) } }
import { Component } from '@angular/core'; import { ChildAppComponent } from './child-app/child-app.component'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public myparam: number; constructor() { this.counter = 0; } public counter : number; public myMethod():void { this.counter++; } }
MyParent counter = {{counter}}
<app-grid-list #appgrid></app-grid-list> <app-category (myFilter)="appgrid.doFilter($event)"></app-category>
<li *ngFor="let item of results"> <a (click)="filterMe(item.id)"> {{item.title}} </a> </li>
@Output() myFilter = new EventEmitter(); public filterMe(id : number){ this.filter.FilterColumn = 'myColumn'; this.myFilter.emit(this.filter) }
public doFilter(event: any){ this.filter = event as PagingFilterModel this.getData(); }
تا کنون نظری داده نشده است .
اولین کسی باشید که دیدگاه خود را ثبت می کند .
لطفا منتظر بمانید...