如何传递给组件构造函数或 ngOnInit [重复]答案

【问题标题】：How to pass to components constructor or ngOnInit [duplicate]如何传递给组件构造函数或 ngOnInit [重复]
【发布时间】：2019-06-17 18:59:38
【问题描述】：

我有一些我一直在处理的代码，但我在谷歌上找不到任何相关内容。基本上，我想将一个代表 ID 的数字传递给我的组件，以便在实例化时使用。

我不知道该尝试什么

<div class="row">
    <div class = "col-xs-12">
        <app-server *ngFor  = "let server of servers"></app-server>
    </div>
</div>

构造函数或 ngOnInit 将被传递一个数字参数。

【问题讨论】：

你的意思是@Input()？
见this question。

标签： angular

【解决方案1】：

在app-server的组件中，你需要import { Component, Input } from '@angular/core';

然后我们可以使用@Input 让组件知道您将通过模板接收此变量的值。

所以组件看起来像

//... other imports 
import { Component, Input } from '@angular/core';

@Component({
    selector: "app-server",
    templateUrl: "...,
    styleUrls: ["..."]
})
export class AppServerComponent {

    @Input id: number;

    //.. rest of code

}

在您的模板中，您提供如下值：

<app-server *ngFor="let server of servers" [id]="desired_id_value"></app-server>

【讨论】：

所以我们不能只传递一个值？这是有道理的，但我想确定一下。
@AlexanderStaroselsky 在这种情况下，我为什么要将整个服务器对象传递给它自己
@user3851290 你的意思是你能不能把整个server 项传下来？如果是这样，是的，您可以，您可以根据需要尽可能少或多地通过。你只需要更新@Inpu() 的类型。我不是为什么你需要传递一个或另一个，我只是解释说你可以根据你的要求和应用程序在子组件中使用 @Input() 传递尽可能少或尽可能多的传递。
我习惯了 C++。假设您的格式，如果我想说 [id] = servers[server] 我知道这是行不通的，因为“服务器”是一个对象，那么我该如何访问索引？
@user3851290 是的，您可以传递一个值或一个常量。即<app-server *ngFor="let server of servers" [id]="server.id"></app-server>