使用Typescript调用其他组件在Angular 2中的功能
问题描述:
Guys我是Angular 2的新手,基本上我想使用另一个组件中的一个组件的值,以便能够根据该值填充数据。使用Typescript调用其他组件在Angular 2中的功能
基本上我有三个组件App.Component,Category.Component和Products.Component。
App.Component是这两个组件的父项。
这里是Category.Component代码
@Component({
selector: 'Categories',
template: `<li *ngFor="#category of categories">
<a class="" href="{{category.Id}}" (click)="getCategoryProducts(category)">{{category.Name}}</a>
</li>`,
providers :[CategoryService]
})
export class CategoriesComponent {
getData: string;
private categories: CategoryModel[] = [];
private products:ProductModel[] = [];
private productsComponent:ProductsComponent;
constructor(private _categoryService : CategoryService){
this._categoryService.getCategories()
.subscribe(
a=>{
this.categories = a;
}
);
console.log(this.getData);
}
getCategoryProducts(category:CategoryModel)
{
this._categoryService.getProducts(category.Id)
.subscribe(
a=>{
this.products = a;
this.productsComponent.populateProducts(this.products);
}
);
}
}
这里是Products.Component代码
@Component({
selector: 'products',
template: `<div class="products-wrapper grid-4 products clearfix loading">
<div *ngFor="#product of products" (click)="getProduct(product)" class="product">
<div class="product-inner" style="background:url({{product.pictureUrl}})">
<div class="time-left">
<span class="text">Hourly Deal</span>
<ul class="countdown clearfix">
<li>
<div class="text">
<span class="hours">00</span>
</div>
</li>
<li>
<div class="text">
<span class="minutes">00</span>
</div>
</li>
<li>
<div class="text">
<span class="seconds">00</span>
</div>
</li>
</ul>
</div>
<span class="discount-tag">{{product.discount}}%</span>
</div>
</div>
</div>`,
providers :[CategoryService]
})
@Injectable()
export class ProductsComponent {
private product:ProductModel;
private products: ProductModel[] = [];
constructor(private _categoryService : CategoryService)
{
this._categoryService.getProducts(0)
.subscribe(
a=>{
this.products = a;
}
);
}
getProduct(product:ProductModel)
{
alert(product.productId);
this.product = product;
}
populateProducts(products: ProductModel[] = [])
{
this.products = products;
}
}
基本上我想从类别组件的getCategoryProducts产品组件,这样的函数发送产品我可以填充产品。
请帮我 谢谢
答
在主要成分,你可以到类别之一提*品组件的实例:
<categories [productsComponent]="productsComponent"></categories>
<products #productsComponent></products>
您需要添加的输入为productsComponent
字段:
@Component({
(...)
})
export class CategoriesComponent {
getData: string;
private categories: CategoryModel[] = [];
private products:ProductModel[] = [];
@Input() // <------
private productsComponent:ProductsComponent;
(...)
}
您能否请多解释一下 –
确定使用'#productsComponent',您引用e产品组件。这可能是因为您在组件上使用局部变量。如果它在DOM元素上(例如'div'),你将得到一个ElementRef实例。使用'#smth =“ngForm”',您将得到应用于具有'exportAs ='ngForm {'的元素的指令。这个局部变量可以通过属性绑定的输入传递给另一个组件。希望它更清晰;-) –
是的很清楚,谢谢。现在让我试试这个 –