组件间传值，可以用Input或者路由传值。
例如：由列表页进入详情页
1、如果用路由传值，就只需要在路由中添加id参数。
2、如果用Input传值，那么就需要常见一个detail组件，并定义Input参数，在list中调用detail组件，并传入值。
Input传值代码演示：
A是B的父组件，B中有Input参数how,A中调用B组件，并传入[how]参数。
//A页面代码
<table class="table table-bordered">
<tbody>
<tr>
....
</tr>
<tr *ngFor="let item of tasks|filter:'title':keyword;let i=index">
....
<td><app-jinji [how]="item.jinji"></app-jinji></td>
....
</tr>
</tbody>
</table>
//B页面代码
<span class="badge bg-green" *ngIf="how==1">不重要 不紧急</span>
<span class="badge bg-yellow" *ngIf="how==2">不重要 很紧急</span>
<span class="badge bg-yellow" *ngIf="how==3">很重要 不紧急</span>
<span class="badge bg-red" *ngIf="how==4">很重要 很紧急</span>
//B后台代码
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-jinji',
templateUrl: './jinji.component.html',
styleUrls: ['./jinji.component.css']
})
export class JinjiComponent implements OnInit {
@Input()
private how: Number;
constructor() {
}
ngOnInit() {
}
}
最终效果图：
image.png
