Question

我正在学习Angular，但我所面临的问题对于我的实际知识而言太难了。

我正在尝试使用Material Angular CDK构建仪表板。仪表板内的每个卡都会呈现不同的图形。这是问题，我正在将组件作为内容传递给组件，并且将其呈现为字符串而不是组件（屏幕截图）。文件夹结构为：

应用程序根
- 标题
- 仪表板
  - GraphType 1
  - GraphType 2
  - ...
  - GraphType n

下面您将找到所有涉及文件的代码。让我知道是否缺少某些东西。感谢谁会帮助我：）

dashboard-rev3.component.html


<div class="grid-container">
      <mat-grid-list cols="12" rowHeight="350px">
        <mat-grid-tile *ngFor="let card of cards | async" [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>Move</button>
                  <button mat-menu-item>Edit</button>
                  <button mat-menu-item>Delete</button>
                </mat-menu>
              </mat-card-title>
            </mat-card-header>
            <mat-card-content class="dashboard-card-content">
             {{card.content}}
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
      </mat-grid-list>
    </div>


----------


dashboard-rev3.component.ts



  import { Component } from '@angular/core';
    import { map } from 'rxjs/operators';
    import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';



    @Component({
      selector: 'app-dashboard-rev3',
      templateUrl: './dashboard-rev3.component.html',
      styleUrls: ['./dashboard-rev3.component.css'],
    })
    export class DashboardRev3Component {

      /** Based on the screen size, switch from standard to one column per row */
      cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
        map(({ matches }) => {
          if (matches) {
            return [
              { title: 'Active Contracts', cols: 12, rows: 1, content: '<app-graph-bar></app-graph-bar>' },
              { title: 'Building Trends Bar Graph', cols: 12, rows: 1, content: '<app-graph-bar></app-graph-bar>' },
              { title: 'Rate Clock - Currency PPU', cols: 12, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
              { title: 'Building Trends Bar Graph', cols: 12, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
              { title: 'Hammersmith - consumption analysis - YoY Analysis', cols: 12, rows: 1, content: '<app-graph-trend></app-graph-trend>'  }
            ];
          }

          return [
            { title: 'Active Contracts', cols: 5, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
            { title: 'Building Trends Bar Graph', cols: 7, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
            { title: 'Rate Clock - Currency PPU', cols: 4, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
            { title: 'Building Trends Bar Graph', cols: 8, rows: 1, content: '<app-graph-bar></app-graph-bar>'  },
            { title: 'Hammersmith - consumption analysis - YoY Analysis', cols: 12, rows: 1, content: '<app-graph-trend></app-graph-trend>' }

          ];
        })
      );

      constructor(private breakpointObserver: BreakpointObserver) {}
    }


----------

graph-bar.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-graph-bar',
  templateUrl: './graph-bar.component.html',
  styleUrls: ['./graph-bar.component.css']
})

export class GraphBarComponent implements OnInit {

  dataSource: Object;
  constructor() {
      this.dataSource = {
          "chart": {
              "caption": "Countries With Most Oil Reserves [2017-18]",
              "subCaption": "In MMbbl = One Million barrels",
              "xAxisName": "Country",
              "yAxisName": "Reserves (MMbbl)",
              "numberSuffix": "K",
              "theme": "fusion",

          },
          // Chart Data
          "data": [{
              "label": "Venezuela",
              "value": "290"
          }, {
              "label": "Saudi",
              "value": "260"
          }, {
              "label": "Canada",
              "value": "180"
          }, {
              "label": "Iran",
              "value": "140"
          }, {
              "label": "Russia",
              "value": "115"
          }, {
              "label": "UAE",
              "value": "100"
          }, {
              "label": "US",
              "value": "30"
          }, {
              "label": "China",
              "value": "30"
          }]
      };} // end of this.dataSource
  ngOnInit() {
  }

}

Answer 1

在Angular中，DOM模板中的文本内容和HTML内容不相等。为了安全起见，对内容进行了清理，因此，当您尝试将包含HTML标记作为字符串的内容插入到模板中时，它只是呈现为文本，而不是DOM。

通常，您会执行以下操作：

<mat-card-content class="dashboard-card-content">
     <app-graph-bar></app-graph-bar>
</mat-card-content>

在模板中插入另一个组件。

如果插入的组件包含内容，则可能类似于：

<mat-card-content class="dashboard-card-content">
     <app-graph-bar>{{card.content}}</app-graph-bar>
</mat-card-content>

如果组件需要根据内容而有所不同，则可以使用模板逻辑：

<mat-card-content class="dashboard-card-content">
     <app-graph-bar *ngIf="card.type == 'bar'">{{card.content}}</app-graph-bar>
     <app-graph-pie *ngIf="card.type == 'pie'">{{card.content}}</app-graph-pie>
</mat-card-content>

最重要的是，您不能做自己尝试过的事情，但是您很可能可以做自己想做的事情。

就像其他人在评论中提到的那样，有时您可以将内容绑定到innerHTML，但这并不总是能产生预期的结果。而且，如果您需要更多高级功能，则可以使用动态组件加载。

Angular 6-将子组件渲染为父组件中的内容

1 个答案: