typescript 从一个组件到另一个组件的访问变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44646607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access variable from one component into another
提问by Shrike
Im trying to do some angular project, but im not into web development. Its simple shop.
I wanted to get some informations from sqlite by Play Framework. It is working.
After I receive it in angular and display.
Its working too. Service:
我正在尝试做一些有角度的项目，但我不从事网络开发。它的简单商店。
我想通过 Play Framework 从 sqlite 获取一些信息。这是工作。
在我收到它并显示后。它的工作也。服务：
@Injectable()
export class ProductService {
constructor(private http: Http) { }
getProducts() {
const headers: Headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
const options = new RequestOptions({headers: headers});
return this.http.get('http://localhost:9900/', options)
.map(response => <Product[]>response.json());
}
}
And place when i take all products:
当我拿走所有产品时的位置：
export class ProductComponent implements OnInit {
public products: Product[];
actualProduct: Product;
productForm: FormGroup;
public quantity: number;
private activeFilter: string = "reset";
public allFilters: Array<string>;
constructor(private productService: ProductService,private router:Router) {
this.allFilters = ['ocean', 'river', 'aquarium', 'reset'];
}
ngOnInit() {
this.productService.getProducts().subscribe(data => this.products = data);
}
public getActualProduct() {
return this.actualProduct;
}
clickedProduct(product) {
this.actualProduct = product;
let link = ['/detail', product.prodId];
this.router.navigate(link);
}
public setFilter(filter: string) {
this.activeFilter = filter;
}
}
So my question: how can I access to array products in other components? Cause now, when i click on button with function clickedProduct its working perfect. It display in console object product. But when I try to use product to display product details in other component I fail:
所以我的问题是：如何访问其他组件中的阵列产品？因为现在，当我点击带有 clickedProduct 功能的按钮时，它的工作完美无缺。它显示在控制台对象产品中。但是当我尝试使用 product 在其他组件中显示产品详细信息时，我失败了：
export class ProductDetailComponent implements OnInit {
selectedProduct: Product;
products: Product[];
quantity: number;
constructor(
private productService:ProductService,
private productComponent: ProductComponent,
private route:ActivatedRoute,
private location:Location,
// private cartStore: CartStore
) { }
ngOnInit() {
this.selectedProduct = this.productComponent.getActualProduct();
}
addToCart(product) {
console.log(this.selectedProduct)
console.log(product)
//this.cartStore.addToCart(product, this.quantity || 1)
}
goBack() {
this.location.back()
}
}
How can I get actualProduct variable in ProductDetailComponent, or how can I get array of all products? I tried use "@Input() actualProduct: Product" in productComponent, but It actually doesnt work. Thanks for help.
如何在 ProductDetailComponent 中获取实际产品变量，或者如何获取所有产品的数组？我尝试在 productComponent 中使用 "@Input() actualProduct: Product"，但它实际上不起作用。感谢帮助。
采纳答案by Jota.Toledo
This is strongly related to the way that those components are related to each other.
这与这些组件相互关联的方式密切相关。
If there is a parent-childrelation, you can pass information to the child component by using @Inputproperties, and listen to the child events in the parent by means of @Outputproperties.
如果存在父子关系，可以通过@Input属性向子组件传递信息，通过属性监听父级中的子事件@Output。
If such a relation between the components doesnt exist (for example routed components), then the most common option is to create a servicethat manages the information/event flow between the components.
如果组件之间不存在这种关系（例如路由组件），那么最常见的选择是创建一个服务来管理组件之间的信息/事件流。
For furhter information please take a look in the docs
有关更多信息，请查看文档
