如何将动态XHR内容动态导入到模板中？

我使用以下代码获取仪表板 HTML 数据，该代码在单击按钮时执行：

fetchDashboard() {
    const requestOptions: Object = {
      headers: new HttpHeaders().append('Authorization', 'Bearer <tokenhere>'),
      responseType: 'text'
    }
    this.http.get<string>('http://localhost:3000/avior/dashboard',
        requestOptions)
            .subscribe(response => {
                   this.dashboardData = response;
            }
    );
}

我有多个组件设置我的视图，并且我想从头开始完全修改其中一个视图以包含获取的内容，我该怎么做？

按照推荐here https://stackoverflow.com/questions/31548311/angular-html-binding?rq=1我尝试使用<div [innerHtml]="dashboardData"></div>没有任何用处。

UPDATE

我的管理员 nav.ts 看起来像这样：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-avior-admin-nav',
  templateUrl: './avior-admin-nav.component.html',
  styleUrls: ['./avior.component.css']
})
export class AviorAdminNavComponent implements OnInit {

  dashboardData: string;


  constructor(private http: HttpClient) { }

  ngOnInit() {console.log('dashboardData: ', this.dashboardData);


  }
  fetchDashboard() {

    const requestOptions: object = {
      // tslint:disable-next-line: max-line-length
      headers: new HttpHeaders().append('Authorization', 'Bearer tokenhere'),
      responseType: 'text'
    };
    this.http.get<string>('http://localhost:3000/avior/dashboard',
        requestOptions)
            .subscribe(response => {
                   console.log(response);
                   this.dashboardData = response;
            }
    );
}

}

我的仪表板 component.ts 如下所示：

import { Component, OnInit, Input } from '@angular/core';
import { User } from '../models/user.model';

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

export class DashboardComponent implements OnInit {
  /* @Input() */ dashboardData: string;
  user: User;
  // dashboardData: string;
  constructor() { }

  ngOnInit() {
    console.log('dashboardData in dashboard comp: ', this.dashboardData);
  }

  canDeactivate(): Promise<any> | boolean {
    if (localStorage.getItem('currentUserToken') === 'token') {
            return (true);
          } else {
            return (false);
          }

}
}

我的仪表板组件 HTML 如下所示：

<p>
  Welcome and please replace me with dashboard text!
</p>
<div [innerHtml]="dashboardData"></div>
<div *ngIf="this.dashboardData" [innerHtml]="dashboardData">Test {{this.dashboardData}}</div>

我的管理导航 HTML 如下所示：

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Administration
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" (click)=fetchDashboard()>Dashboard</a>
                        <a class="dropdown-item" [routerLink]="['/avior/users']">Users</a>
                        <a class="dropdown-item" [routerLink]="['/avior/workflows']">Workflows</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" [routerLink]="['/avior/system']">System</a>
                    </div>
                </li>

我的 avior.component.html 看起来像这样：

<div>
    <router-outlet></router-outlet>
</div>

我的 app.component.html 看起来像这样：

<!-- Navigation -->
<div class="navigation">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">

        <!-- Brand - Logo + Title -->
        <a class="navbar-brand">
            <img width="25" src="../assets/images/app_logo.jpg">
            <a class="navbar-brand" [routerLink]="['/avior/dashboard']">&nbsp;&nbsp;=== Application ===</a>
        </a>

        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Menu left -->
            <ul class="navbar-nav mr-auto">

                <!-- Menu App -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Application
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" [routerLink]="['/carinae/list-content']">Mask 1</a>
                        <a class="dropdown-item" [routerLink]="['/carinae/tree-tab']">Mask 2</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" [routerLink]="['/carinae/app-settings']">App Settings</a>
                    </div>
                </li>

                <!-- Menu Admin-->
                <app-avior-admin-nav></app-avior-admin-nav>
            </ul>

            <!-- Menu right -->
            <app-avior-user-nav></app-avior-user-nav>
        </div>
    </nav>
</div>

<!-- Content / Output -->
<div class="content">
    <router-outlet></router-outlet>
</div>

如果请求的响应返回 HTML 作为字符串，您只需更正与模板的绑定即可。代替 ：

<div [innerHtml]="this.dashboardData"></div>

by

<div [innerHTML]="dashboardData"></div>

如果您检查问题中提供的链接，HTML 中的绑定永远不会调用this关键词。

EDIT

现在代码已包含在内，您的 admin-nav 组件将获取仪表板数据，并将其存储在其仪表板数据成员中。但它从未传输到您的仪表板组件。现在 ：

DashboardComponent.ts ：取消注释 @Input()。

DashboardComponent.html：正确的 *ngIf="dashboardData"

Nav.html ：添加一个<app-dashboard [dashboardData]="dashboardData"></app-dashboard>