如何在仪表板上以斜角显示页面？

Question

目前我正在使用CoreUI：

Angular CLI：9.0.0-rc.7

我创建了一个购买页面，但是我的购买页面可以罚款，但要单独支付。当用户单击购买页面时，我想在仪表板上显示购买页面？？？

当前，我的页面正在显示，但单独显示。

http://localhost:4200/purchase

Indivisual Page Purchase

首先，我在视图文件夹中创建购买页面：

ng g c次浏览/购买

• 意见
  • 购买
    • purchase.component.ts
    • purchase.component.html
    • purchase.component.css
    • purchase.component.spec.ts

purchase.component.html

<p>purchase works!</p>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>
purchase.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}
app.module.ts

import { PurchaseComponent } from './views/purchase/purchase.component';

@NgModule({
  imports: [
declarations: [
 PurchaseComponent
app.routing.ts

import { PurchaseComponent } from './views/purchase/purchase.component';

export const routes: Routes = [
   {
      path: '',
      redirectTo: 'dashboard',
      pathMatch: 'full',
  },
  {
      path: 'purchase',
      component: PurchaseComponent,
      data: {
          title: 'Home'
      }
  },

我的购买页面可以罚款，但要单独支付？我想在仪表板上显示购买页面吗？

DashBoard图片：

enter image description here

在dashboard.component.html中不起作用

dashboard.component.html

<app-purchase>
    //empty
</app-purchase>

目前，我正在使用CoreUI：Angular CLI：9.0.0-rc.7。我创建了一个购买页面，我的购买页面可以很好地支付，但可以单独支付。当用户...