如何在 angular 中的仪表板上显示页面？

Question

目前我正在研究 CoreUI：

Angular CLI: 9.0.0-rc.7

我创建了一个购买页面，我的购买页面显示良好但单独显示。我想在用户点击购买页面时在仪表板上显示购买页面？？？

目前我的页面是单独显示的。

http://localhost:4200/purchase

Indivisual Page Purchase

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

ng g c views/purchase

观看次数
- 购买
  - 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'
      }
  },

我的购买页面显示正常但单独显示？我想在控制面板上显示购买页面？

仪表板图像：

enter image description here

不在dashboard.component.html

工作

dashboard.component.html

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

Answer 1

在 app.routing.ts 中添加您的 PurchaseComponent 路径到子部分

 children: [
      {
      path: 'purchase',
      component: PurchaseComponent,
      data: {
          title: 'Purchase'
      }
  },

如何在 angular 中的仪表板上显示页面？

how to display a page on dashboard in angular?

typescript

angular-ui-router

angular