Question

我正在学习Angular 2.尝试将变量从一个组件传递到另一个组件。首先，我的目标网页包含项目列表。喜欢这个

JSON

items = [{
        "id": "1",
        "name": "Item1",
        "price": 100,
        "type": 101,
        "status": 0
    }, {
        "id": "2",
        "name": "Item2",
        "price": 100,
        "type": 102,
        "status": 1
    }]

第一个组件

@Component({
    selector: 'items-cmp',
    templateUrl: 'items.component.html'
})

export class ItemsComponent {
  constructor(private itemsDetails: ItemDetails, private router: Router){}
  getItemsList() {
    this.itemsDetails.listOfItems()
      .subscribe((resp: any) => {
        this.items = resp;
      });
  }
  this.getItemsList();

  routeTo(itemId: string) {
    this.router.navigate(['/dashboard', 'items', itemId, 'general']);
  }
}

items.component.html

<table>
    <thead>
        <th class="avatar-th"></th>
        <th>ItemName</th>
        <th>Price</th>
        <th>Type</th>
    </thead>
    <tbody>
        <tr *ngFor="let item of items" (click)="routeTo(item.id)">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.type}}</td>
        </tr>
    </tbody>
</table>

此处将显示项目列表。当我点击任何项目时，它将重定向到第二页。第二页包含三个图标。此处有两个图标是默认图标，但仅当项目 status = 1

时，才会显示第三个图标

第二个组件

@Component({
    selector: 'item-cmp',
    templateUrl: 'item.component.html'
})

export class ItemComponent { }

item.component.html

<div class="icons">
    <ul class="cicons">
        <li title="first" (click)="routeTo('first')"><i class="fa fa-male fa-lg"></i></li>
        <li title="second" (click)="routeTo('second')"><i class="fa fa-file-text fa-lg"></i></li>
        <li title="third" (click)="routeTo('third')"><i class="fa fa-female fa-lg"></i></li>
    </ul>
</div>

这里的问题是如何将项目的状态传递给下一个组件？

修改

我试过这个

共享服务

private _stream$ = new BehaviorSubject("");
    public stream$ = this._stream$.asObservable();

    send(msg: any) {
        this._stream$.next(msg);
    }

firstComponent：

hideIcon: boolean = false;
showIcon(show: any) {
    if (show)
      this.hideIcon = true;
    else
      this.hideIcon = false;
    this._evt.send(this.hideIcon);
  }

第二个组件

_hideIcon: boolean = false;
ngOnInit() {
    this.getItem();

    this._evt.stream$.subscribe(this.receiveMessage.bind(this));
}

receiveMessage(msg: any) {
    this._hideIcon = msg;
    console.log("this._hideANCVisit :",this._hideANCVisit);
}

如果 status = 1 ，则会显示图标。在我刷新页面图标的同时，图标正在消失。

Angular 2：将变量从一个组件传递到另一个组件

修改

0 个答案: