Question

我有一个名为clock.component.ts的组件和一个仪表板，我在其中多次调用时钟。在控制仪表板中调用从数据库分配给用户的运行程序，如果他有3个指定的运行程序，那么他将渲染clock.component 3次。如何识别或发送每个走廊的ID到其各自的组件？

这是在dashboard.component.html

中

<app-clock *ngFor="let corredor of runnerList"></app-clock>

列表runnerList具有跑步者的对象，其id为

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-clock',
    templateUrl: './clock.component.html',
    styleUrls: ['./clock.component.css']
})

export class ClockComponent implements OnInit {

    idCorredor; //This is the id that I need

    constructor() { }

    ngOnInit() {

    }


    startClock(){
    }

}

Answer 1

您可以通过添加和输入组件来执行此操作。

import { Component, OnInit,Input } from '@angular/core';

@Component({
selector: 'app-clock',
templateUrl: './clock.component.html',
styleUrls: ['./clock.component.css']
})

export class ClockComponent implements OnInit {

@Input() idCorredor; //This is the id that I need

constructor() { }

ngOnInit() {

}


startClock(){
}

}

以这种方式分配输入

<app-clock *ngFor="let corredor of runnerList" [idCorredor]="corredor.id"></app-clock>

如何识别Angular 4中相同类型的渲染组件？

1 个答案: