组件间传值之@Input

组件间传值，可以用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

组件间传值之@Input

推荐阅读更多精彩内容