組件間傳值，可以用Input或者路由傳值。
例如：由列表頁進(jìn)入詳情頁
1、如果用路由傳值，就只需要在路由中添加id參數(shù)。
2、如果用Input傳值，那么就需要常見一個(gè)detail組件，并定義Input參數(shù)，在list中調(diào)用detail組件，并傳入值。

Input傳值代碼演示：
A是B的父組件，B中有Input參數(shù)how,A中調(diào)用B組件，并傳入[how]參數(shù)。

//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后臺(tái)代碼
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