Question

我正在使用@angular/material:material-dashboard，并且网格图块需要具有业务逻辑

单独的组件
动态加载

使用简单的动态组件生成似乎有问题，因为网格图块无法正确设置样式。特别是，它们将以0的宽度和高度“出现”（尽管它们在DOM中有效地使它们不可见）。

我已经研究过使用嵌入式视图，但是它们不适合用例，并且使用注入器也不方便。

这是我在做什么：控制器：

export class DashboardComponent implements AfterViewInit {
  @ViewChild(WidgetDirective) widgetHost: WidgetDirective;

  constructor(private widgetService: WidgetService,
    private cd: ChangeDetectorRef, private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    this.widgetService.getWidgets().subscribe(widgets => {
      let viewContainerRef = this.widgetHost.viewContainerRef;
      for (const widget of widgets) {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widget['component']);
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<Widget>componentRef.instance).data = widget['data'];
      }
      this.cd.detectChanges();
    });
  }
}

视图：

<div class="grid-container">
  <mat-grid-list cols="2" rowHeight="350px">
    <ng-template widget></ng-template>
  </mat-grid-list>
</div>

这是小部件的视图：

<mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
  <mat-card class="dashboard-card">
    <mat-card-header>
      <mat-card-title>
        {{card.title}}
        <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu" xPosition="before">
          <button mat-menu-item>Expand</button>
          <button mat-menu-item>Remove</button>
        </mat-menu>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content class="dashboard-card-content">
      <p>
        Morbi interdum lobortis ac dapibus quisque quam praesent? Duis diam felis adipiscing arcu viverra. Taciti neque dictum elementum! Elementum cras enim congue hendrerit. Sodales arcu dapibus ipsum molestie hendrerit id risus morbi habitasse tellus leo. Penatibus elementum dictum nec molestie! Ultricies tempus sagittis massa erat primis faucibus sit ad habitasse condimentum lobortis sit! Eros sagittis faucibus nullam amet neque, facilisi iaculis inceptos. Vivamus orci felis torquent ultricies vitae tincidunt suspendisse commodo mollis nam. Nullam turpis non semper aliquam vitae varius cras vivamus semper!
        Sed gravida tortor nam lacinia conubia conubia rhoncus himenaeos. Sagittis parturient lobortis curabitur pretium cras dui. Massa auctor feugiat nibh magna. Senectus torquent convallis class volutpat, tortor sapien duis justo ante magnis. Fusce ornare netus hendrerit consectetur himenaeos quam venenatis ipsum vivamus iaculis lacinia. Nisl ad aliquet eu risus dictum eros. Dolor pretium odio natoque. Class iaculis tincidunt tincidunt laoreet? Ac varius, per penatibus pellentesque. Morbi nascetur euismod cras duis tortor vestibulum molestie eget hac varius montes. Cras mi etiam, ultrices donec integer! Blandit facilisis molestie phasellus dapibus, gravida arcu congue. Tellus ornare aliquet dolor nullam.
        Rutrum id, metus ridiculus adipiscing fames nullam? Tempus, vivamus sem sodales accumsan. Magnis nam, lectus orci integer. Est leo ornare sagittis varius dignissim. Etiam eu congue, cras nulla nascetur nisi sapien aptent tristique turpis euismod dapibus! Mollis libero habitasse class blandit tincidunt. Est mus interdum fringilla, a vestibulum natoque praesent vulputate egestas mi quam lobortis. Vel ut lectus hac, class taciti congue molestie sociis. Montes dis pharetra mus. Nullam cubilia sociosqu class sodales. Consequat sapien pretium leo pretium cursus fringilla magnis in augue vitae accumsan! Fames!
        Mattis quisque facilisi pharetra felis aliquam aliquet dignissim aenean? Curabitur lorem per at quis varius mollis maecenas dictum hendrerit. Ante scelerisque aliquam tincidunt integer praesent consectetur ipsum elit sagittis eu sollicitudin. Consectetur pulvinar class metus laoreet sit arcu sollicitudin parturient, facilisis commodo cubilia. Est fermentum nascetur dictum lacinia eleifend dictum nisl ultrices, habitasse venenatis. Magna.
        Consectetur sagittis proin suspendisse ad interdum vulputate potenti consequat. Et fusce pharetra id mauris. Diam ac dictumst aliquet eleifend nunc tempus at sed ridiculus suspendisse rhoncus. Consectetur imperdiet egestas integer nisl tristique integer? Sit neque, scelerisque sapien ac. Libero tellus pellentesque morbi leo fringilla vivamus morbi sociis consectetur. Nulla luctus orci sit mattis scelerisque est. Pharetra praesent sociosqu ornare quis suscipit proin, dolor dapibus habitasse nibh class condimentum? Platea proin nullam elementum etiam facilisi.
      </p>
    </mat-card-content>
  </mat-card>
</mat-grid-tile>

使用一些最少的代码即可将数据字段更改为卡字段。

这就是我想要的：

<mat-grid-list ...>
  <div>
     <mat-grid-tile ...>

但是这是正在发生的事情

<mat-grid-list ...>
  <div>
    <widgetname1>
       <mat-grid-tile ...>

这将终止网格列表的功能。奇怪的是，此功能无法与动态添加的组件一起使用，因此必须要忽略一些东西，或者只是删除主机元素并每天调用它的解决方案...

创建没有宿主元素的宿主视图？

0 个答案: