- Angular UI Development with PrimeNG
- Sudheer Jonna Oleg Varaksin
- 505字
- 2021-07-15 17:32:56
Communication between components
Components can communicate with each other in a loosely coupled manner. There are various ways Angular's components can share data, including the following:
- Passing data from parent to child using @Input()
- Passing data from child to parent using @Output()
- Using services for data sharing
- Calling ViewChild, ViewChildren, ContentChild, and ContentChildren
- Interacting with the child component using a local variable
We will only describe the first three ways. A component can declare input and output properties. To pass the data from a parent to a child component, the parent binds the values to the input properties of the child. The child's input property should be decorated with @Input(). Let's create TodoChildComponent:
@Component({
selector: 'todo-child',
template: `<h2>{{todo.title}}</h2>`
})
export class TodoChildComponent {
@Input() todo: Todo;
}
Now, the parent component can use todo-child in its template and bind the parent's todo object to the child's todo property. The child's property is exposed as usual in square brackets:
<todo-child [todo]="todo"></todo-child>
If a component needs to pass the data to its parent, it emits custom events via the output property. The parent can create a listener to a particular component's event. Let's see that in action. The child component ConfirmationChildComponent exposes an EventEmitter property decorated with @Output() to emit events when the user clicks on buttons:
@Component({
selector: 'confirmation-child',
template: `
<button (click)="accept(true)">Ok</button>
<button (click)="accept(false)">Cancel</button>
`
})
export class ConfirmationChildComponent {
@Output() onAccept = new EventEmitter<boolean>();
accept(accepted: boolean) {
this.onAccept.emit(accepted);
}
}
The parent subscribes an event handler to that event property and reacts to the emitted event:
@Component({
selector: 'confirmation-parent',
template: `
Accepted: {{accepted}}
<confirmation-child (onAccept)="onAccept($event)"></confirmation-child>
`
})
export class ConfirmationParentComponent {
accepted: boolean = false;
onAccept(accepted: boolean) {
this.accepted = accepted;
}
}
A bi-directional communication is possible via services. Angular leverages RxJS library (https://github.com/Reactive-Extensions/RxJS) for asynchronous and event-based communication between several parts of an application as well as between an application and remote backend. The key concepts in the asynchronous and event-based communication are Observer and Observable. They provide a generalized mechanism for push-based notification, also known as the observer design pattern. Observable represents an object that sends notifications, and Observer represents an object that receives them.
Angular implements this design pattern everywhere. For example, Angular's Http service returns an Observable object:
constructor(private http: Http) {}
getCars(): Obvervable<Car[]> {
return this.http.get("../data/cars.json")
.map(response => response.json().data as Car[]);
}
In case of the inter-component communication, an instance of the Subject class can be used. This class inherits both Observable and Observer. That means it acts as a message bus. Let's implement TodoService that allows us to emit and receive Todo objects:
@Injectable()
export class TodoService {
private subject = new Subject();
toggle(todo: Todo) {
this.subject.next(todo);
}
subscribe(onNext, onError, onComplete) {
this.subject.subscribe(onNext, onError, onComplete);
}
}
Components can use this service in the following way:
export class TodoComponent {
constructor(private todosService: TodosService) {}
toggle(todo: Todo) {
this.todosService.toggle(todo);
}
}
export class TodosComponent {
constructor(private todosService: TodosService) {
todosService.subscribe(
function(todo: Todo) { // TodoComponent sent todo object },
function(e: Error) { // error occurs },
function() { // completed }
);
}
}
- Oracle 12c中文版數據庫管理、應用與開發實踐教程 (清華電腦學堂)
- 實戰Java程序設計
- ASP.NET動態網頁設計教程(第三版)
- Groovy for Domain:specific Languages(Second Edition)
- 實戰低代碼
- Spring Cloud、Nginx高并發核心編程
- Cassandra Data Modeling and Analysis
- Quarkus實踐指南:構建新一代的Kubernetes原生Java微服務
- 微信公眾平臺開發:從零基礎到ThinkPHP5高性能框架實踐
- 用案例學Java Web整合開發
- C語言程序設計實訓教程與水平考試指導
- Learning VMware vSphere
- 現代CPU性能分析與優化
- Robot Framework Test Automation
- RESTful Web API Design with Node.js