大佬教程收集整理的这篇文章主要介绍了Angular 2将父组件中的数据传递给子组件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
父模板:
<div class="container-fluid"> <div class="col-sm-9"> <app-product-card [products]=products></app-product-card> </div>
父组件:
@Component({ SELEctor: 'app-appliances-product-card',modulEID: module.id,templateUrl: 'appliances-product-card.component.html' }) export class AppliancesProductCardComponent implements OnInit{ products: Product[]; filterProduct(filter) { this.products = this.filteredProducts; } }
子组件:
@Component({ SELEctor: 'app-product-card',templateUrl: 'product-card.component.html' }) export class ProductCardComponent { @input() products: Product[]; }
https://plnkr.co/edit/S47fBh2xdT1gp2zrznk4?p=preview
父代组件和子组件都将使用服务来获取数据,而不是将数据从父组件传递到子组件.
父组件:
import { Component,OnInit } from '@angular/core'; import { Product } from './product' import { Productsservice } from './products.service'; @Component({ SELEctor: 'app-appliances-product-card',template: ` <div class="container-fluid"> <button (click)="filterProduct('Type 1')">Filter Type 1</button> <button (click)="filterProduct('')">Clear Filter</button> <div class="col-sm-9"> <app-products-card></app-products-card> </div> </div> ` }) export class AppliancesProductCardComponent implements OnInit { products: Product[]; constructor(private _productsservice: ProductsservicE){ } filterProduct(type: String) { this.products = this._productsservice.filterProduct(typE); } ngOnInit() { this.products = this._productsservice.getAllProducts(); } }
子组件:
import { Component,OnInit,Input } from '@angular/core'; import { Product } from './product'; import { Productsservice } from './products.service'; @Component({ SELEctor: 'app-products-card',template: ` <h1>Product Card</h1> <div *ngFor="let product of products">{{product.namE}} - {{product.typE}}</div> ` }) export class ProductsCardComponent implements OnInit { constructor(private _productsservice: ProductsservicE){ } ngOnInit() { this.products = this._productsservice.getAllProducts(); this._productsservice.filteredProducts.subscribe(products => { console.log(products); this.products = products }); } }
服务:
import { EventEmitter,Injectable } from '@angular/core'; import { Product } from './product'; export class Productsservice { filteredProducts = new EventEmitter<Product[]>; private products: Product[] = [ { id: 1,name: 'Product 1',price: 10.50,type: 'Type 1' },{ id: 2,name: 'Product 2',price: 15.50,{ id: 3,name: 'Product 3',price: 1.50,type: 'Type 2' },{ id: 4,name: 'Product 4',price: 100.50,type: 'Type 3' } ]; getAllProducts(): Product[] { return this.products.slice(); } filterProduct(type: String): Product[]{ let filteredProducts = this.products.filter(p => !type || p.type == typE).slice(); this.filteredProducts.emit(filteredProducts); } }
我第一次开始编写角度应用程序时遇到了类似的问题.始终将数据从父组件传递到子组件不是编写应用程序的可管理方式.特别是如果它是一个包含太多嵌套组件的大应用程序.
在这个例子中,我使用服务和事件发射器(角度框架的一部分)来向子组件和父组件提供相关数据.
改进代码的一种方法是使用rxjs.这是角度事件发射器在场景后面使用的.
以上是大佬教程为你收集整理的Angular 2将父组件中的数据传递给子组件全部内容,希望文章能够帮你解决Angular 2将父组件中的数据传递给子组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。