代码之家 › 专栏 › 技术社区 › Matheno

触发下一个JSON项

angular6 typescript

0

Matheno · 技术社区 · 7 年前

我有一个主组件,它有一个过滤器,并加载一个项目列表。

有人能给我指出正确的方向吗?

main.component.html中的我的列表:

<table class="table table-striped">
   <thead>
     <tr>
       <td><strong>Nr</strong></td>
       <td><strong>Name</strong></td>
     </tr>
   </thead>
   <tbody style="overflow:scroll;">
      <tr routerLink="./{{item.id}}" <!-- this goes to my detail-component -->
          ngFor="let item of listItems; let i = index;"
          (click)="setClickedRow(i)"
          [class.active]="i == selectedRow">
          <td >{{item.number}}</td>
          <td>{{item.description}}</td>
      </tr>
    </tbody>
  </table>

<div class="col-sm-9 col-pd-ow grid-wo">
    <div class="row">
      <div class="col-sm-12 col-pd-ow">

        <!-- List view component -->
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

我的路线:

const routes: Routes = [
  {
    path: '',
    component: ItemComponent,
    children: [
      { path: '', redirectTo: 'list' },
      { path: 'list', component: ListViewComponent},
      { path: ':id', component: DetailsViewComponent }
    ]
  }
];

export class DetailsViewComponent implements OnInit, OnDestroy {

  subscription: Subscription;
  public id: number;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.id = params['id'];
        this.itemService.get(this.id).subscribe(item => {
          this.item = item;
        });
      });
  }

1 回复 | 直到 7 年前

1

rguerin 7 年前

要将信息传递给父组件,可以使用EventEmitter,但必须创建两个不同的组件,如下所示:

MainComponent.html:

<table class="table table-striped">
   <thead>
     <tr>
       <td><strong>Nr</strong></td>
       <td><strong>Name</strong></td>
     </tr>
   </thead>
   <tbody style="overflow:scroll;">
      <details-component ngFor="let item of listItems; let i = index;"
          (click)="setClickedRow(i)"   
          [class.active]="i == selectedRow"
          [index]="i"
          [itemId]="{{item.id}}"
          [description]="{{item.description}}"
          (selectSibling)="setClickedRow(siblingNumber)">
      </details-component>
    </tbody>
  </table>

新详图构件类:

@Component({
    selector: 'details-component',
    templateUrl: 'details-component.html'
})
export class DetailsViewComponent implements OnInit, OnDestroy {

  @Output() selectSibling: EventEmitter<number> = new EventEmitter<number>();

  @Input() index: number;
  @Input() description: string;
  @Input() itemId: string;

  subscription: Subscription;
  public item = new Item();

  constructor(private route: ActivatedRoute, private itemService: ItemService) {}

     ngOnInit() {
       this.itemService.get(this.itemId).subscribe(item => {
          this.item = item;
        });
      }

      selectNextSibling(): void {
         this.selectSibling.emit(this.index+1);
      }

      selectPreviousSibling(): void {
        this.selectSibling.emit(this.index-1);
      }
}

您必须在单击相应的箭头时触发selectNextSibling和selectPreviousSibling,并在setClickedRow()方法中执行正确的数组边界检查:)