Angular 6-將子組件渲染為父組件中的內容

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 ，但這並不總是能產生所需的結果。 而且，如果您需要更多高級功能，則可以使用動態組件加載。