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

Question

我使用以下代码获取Dashboard 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;
}
);
}

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

按照这里的建议，我尝试使用<div [innerHtml]="dashboardData"></div>，但没有任何效果。

---

更新

我的管理导航看起来像这样：

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;
}
);
}
}

我的仪表板组件.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>

Answer 1

如果请求的响应以字符串形式返回HTML，则只需更正与模板的绑定即可。替换：

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

通过

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

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

编辑

现在代码已经包含在内，您的管理导航组件将获取dashboardData，并将其存储在其dashboardData成员中。但它从未传输到您的dashboardComponent。现在：

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

DashboardComponent.html：更正*ngIf="dashboardData">

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