Question

我的主要组件负责互操作服务以恢复数据。在我的基本模板上，我使用了一个组件小部件，它会显示一个列表。我希望能够从主组件中检索数据以在我的小部件模板中显示它们（以便它显示在我的基本模板中）

这是我的基本模板上有问题的行：

<vex-widget-tank-details gdColumn="1 / 3" gdColumn.lt-md="1 / -1" gdColumn.lt-sm="1"></vex-widget-tank-details>

这是我的小部件的组件

import { Component, OnInit } from '@angular/core';
import icCheckCircle from '@iconify/icons-ic/twotone-check-circle';

@Component({
  selector: 'vex-widget-tank-details',
  templateUrl: './widget-tank-details.component.html',
  styleUrls: ['./widget-tank-details.component.scss']
})
export class WidgetTankDetailsComponent implements OnInit {

  icCheckCircle = icCheckCircle;

  constructor() { }

  ngOnInit() {
  }

}

这是我的小部件模板

<div class="card bg-primary" fxLayout="row" fxLayout.xs="column">
  <div class="p-4 ml-4" fxFlex="none" fxFlexAlign="center">
    <img src="assets/img/illustrations/checklist.svg" style="height: 168px; width: 152px">
  </div>

  <div class="p-6 text-primary-contrast" fxFlex="auto">
    <h2 class="headline m-0"></h2>
    <p class="caption m-0 opacity-50">You've finished all of your tasks for this week.</p>

    <div class="mt-4" fxLayout="row" fxLayoutAlign="start center">
      <ic-icon [icon]="icCheckCircle" class="mr-2" size="24px"></ic-icon>
      <span class="body-2 cursor-pointer">Finish Dashboard Design</span>
    </div>

    <div class="mt-1" fxLayout="row" fxLayoutAlign="start center">
      <ic-icon [icon]="icCheckCircle" class="mr-2" size="24px"></ic-icon>
      <span class="body-2 cursor-pointer">Fix Issue #74</span>
    </div>

    <div class="mt-1" fxLayout="row" fxLayoutAlign="start center">
      <ic-icon [icon]="icCheckCircle" class="mr-2" size="24px"></ic-icon>
      <span class="body-2 cursor-pointer">Publish version 2.3.3</span>
    </div>
  </div>
</div>

非常感谢您的反馈

Angular 将数据从一个组件传递到另一个小部件组件

0 个答案: