Html 将属性（id）传递给OnInit组件

我有两个组件，一个订单列表和一个订单组件。单击订单列表中的订单id时，订单组件将展开。我希望它能用API中的数据进行扩展。见下文：

 <div class ="order" *ngFor="let order of orders">
     <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
     <app-order id="order-{{order.orderId}}" class="expandContainer"></app-order>
 </div>

{{order.orderId}

订单组件：

 @Component({
   selector: 'app-order',
   templateUrl: './order.component.html',
   styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
   providers: [OrderService]
 })

export class OrderComponent implements OnInit {
 orderId: number;
 order: Order;
 errorMessage: string;

 constructor(
  private orderService: OrderService) {}

 ngOnInit(){
      this.orderService.getOrder(this.orderId)
        .subscribe( order => {
          this.order = order;},
          error => this.errorMessage = <any>error);
 }

@组件({
选择器：“应用程序顺序”，
templateUrl:“./order.component.html”，
styleUrls:['../../shared Styleing/main.scss'，'./order.component.scss']，
提供者：[订单服务]
})
导出类OrderComponent实现OnInit{
orderId：编号；
订单：订单；
错误消息：字符串；
建造师(
专用orderService:orderService）{}
恩戈尼尼特（）{
this.orderService.getOrder（this.orderId）
.订阅（订单=>{
this.order=order；}，
error=>this.errorMessage=error）；
}

现在这不起作用，但上面的代码基本上显示了我想要如何实现它。我想在单击orderId时，以某种方式将orderId从订单列表发送到订单组件。现在它展开列表并显示组件为空，我希望在

中能够传递orderId并从m获取数据服务很好

我该怎么做？

---

由于它是一个列表，因此每次单击新订单id时，它都必须获取一个新订单。

要在组件中获取

订单id

，必须将其声明为

@输入，如下所示：

import { Input } from '@angular/core';
@Component({
    selector: 'app-order',
    templateUrl: './order.component.html',
    styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
    providers: [OrderService]
})

export class OrderComponent implements OnInit {
    @Input() orderId: number;
    order: Order;
    errorMessage: string;

    constructor(
        private orderService: OrderService) {}

    ngOnInit(){
        this.orderService.getOrder(this.orderId)
            .subscribe( order => {
                this.order = order;
            },
            error => this.errorMessage = <any>error);
        }
    }
}

<div class ="order" *ngFor="let order of orders">
    <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
    <app-order [orderId]="order.orderId" id="order-{{order.orderId}}" class="expandContainer"</app-order>
</div>

从'@angular/core'导入{Input}；
@组成部分({
选择器：“应用程序顺序”，
templateUrl:“./order.component.html”，
styleUrls:['../../shared Styleing/main.scss'，'./order.component.scss']，
提供者：[订单服务]
})
导出类OrderComponent实现OnInit{
@Input（）orderId:number；
订单：订单；
错误消息：字符串；
建造师(
专用orderService:orderService）{}
恩戈尼尼特（）{
this.orderService.getOrder（this.orderId）
.订阅（订单=>{
这个。顺序=顺序；
},
error=>this.errorMessage=error）；
}
}
}

然后，必须将其传递给组件，如下所示：

import { Input } from '@angular/core';
@Component({
    selector: 'app-order',
    templateUrl: './order.component.html',
    styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
    providers: [OrderService]
})

export class OrderComponent implements OnInit {
    @Input() orderId: number;
    order: Order;
    errorMessage: string;

    constructor(
        private orderService: OrderService) {}

    ngOnInit(){
        this.orderService.getOrder(this.orderId)
            .subscribe( order => {
                this.order = order;
            },
            error => this.errorMessage = <any>error);
        }
    }
}

<div class ="order" *ngFor="let order of orders">
    <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
    <app-order [orderId]="order.orderId" id="order-{{order.orderId}}" class="expandContainer"</app-order>
</div>


{{order.orderId}
要在组件中获取
orderId
，必须将其声明为
@Input
，如下所示：

import { Input } from '@angular/core';
@Component({
    selector: 'app-order',
    templateUrl: './order.component.html',
    styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
    providers: [OrderService]
})

export class OrderComponent implements OnInit {
    @Input() orderId: number;
    order: Order;
    errorMessage: string;

    constructor(
        private orderService: OrderService) {}

    ngOnInit(){
        this.orderService.getOrder(this.orderId)
            .subscribe( order => {
                this.order = order;
            },
            error => this.errorMessage = <any>error);
        }
    }
}

<div class ="order" *ngFor="let order of orders">
    <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
    <app-order [orderId]="order.orderId" id="order-{{order.orderId}}" class="expandContainer"</app-order>
</div>

从'@angular/core'导入{Input}；
@组成部分({
选择器：“应用程序顺序”，
templateUrl:“./order.component.html”，
styleUrls:['../../shared Styleing/main.scss'，'./order.component.scss']，
提供者：[订单服务]
})
导出类OrderComponent实现OnInit{
@Input（）orderId:number；
订单：订单；
错误消息：字符串；
建造师(
专用orderService:orderService）{}
恩戈尼尼特（）{
this.orderService.getOrder（this.orderId）
.订阅（订单=>{
这个。顺序=顺序；
},
error=>this.errorMessage=error）；
}
}
}

然后，必须将其传递给组件，如下所示：

import { Input } from '@angular/core';
@Component({
    selector: 'app-order',
    templateUrl: './order.component.html',
    styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
    providers: [OrderService]
})

export class OrderComponent implements OnInit {
    @Input() orderId: number;
    order: Order;
    errorMessage: string;

    constructor(
        private orderService: OrderService) {}

    ngOnInit(){
        this.orderService.getOrder(this.orderId)
            .subscribe( order => {
                this.order = order;
            },
            error => this.errorMessage = <any>error);
        }
    }
}

<div class ="order" *ngFor="let order of orders">
    <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
    <app-order [orderId]="order.orderId" id="order-{{order.orderId}}" class="expandContainer"</app-order>
</div>


{{order.orderId}
在模板中

 <app-order [orderId]="order.orderId" class="expandContainer"</app-order>

{
this.order=order；}，
error=>this.errorMessage=error）；
}
在模板中

 <app-order [orderId]="order.orderId" class="expandContainer"</app-order>

{
this.order=order；}，
error=>this.errorMessage=error）；
}
如果您需要将信息从一个组件传递到另一个组件，请使用事件发射器。我不确定我会怎么做，我看过一些关于它的文章，但这让我感到困惑。你知道我将如何在上面的代码中实现它吗？当你将id传递到组件中时，它应该更像这样：
[orderId]=“order.orderId”
。另外，请确保在您的
OrderComponent
中，要使用
@Input（）
orderId的装饰器，如果您需要将信息从一个组件传递到另一个组件，请使用事件发射器。我不确定我将如何做，我已经看过一些关于它的文章，但这让我感到困惑。你知道我将如何在上面的代码中实现它吗？当你将id传递到组件中时，它应该更像这样：
[orderId]=“order.orderId”
。还要确保在您的
OrderComponent
中，为
orderId
使用
@Input（）
装饰程序，这正是我要找的：）这正是我要找的：）为什么有人投票否决了这个@schivv请将此答案标记为已解决，如果它确实解决了您的问题，thx。@Hinrich谢谢，但我看到现在有人在没有评论的情况下投了反对票。我将其标记为答案，我以前无法这样做，因为这是在我发布问题后不久，为什么有人投了反对票@schivv请将此答案标记为已解决，如果它确实解决了您的问题，thx。@Hinrich谢谢，但我看到现在有人投了反对票，没有任何评论。我将其标记为答案，我以前不能这样做，因为这是在我发布问题后不久