如何在angular 4中的另一个html页面的html页面上显示

嗨，我在做Angular 4

我想知道的是我们如何将

上的HTML页面（单击）

绑定到另一个HTML页面

我试过

*ng if

和

但对我不起作用

所以我只使用了基本的HTML和引导

选项卡窗格淡入淡出

和

数据切换

作为我的菜单

但我想为下面三个菜单项创建单独的HTML页面，并希望在单击相应的菜单时绑定相应的页面

我想在单击菜单时弹出一个模态，但我在另一个文件夹中有一些常用模态

你可以用有棱角的材料来做。它是Angualar的UI实用程序组件库

在HTML文件中

<li class="nav-item">
    <a class="nav-link active"  data-toggle="tab" (click)="openSomeModal()">My app definitions</a>
</li>

在你的模块中，你必须导入材料

---

检查此角度材质参考

我使用了ngx引导

你可以看到下面的链接

我可以执行此按钮，并且各个型号位于同一HTML页面中

但是，如果它们位于不同的HTML页面中，我仍然不知道如何绑定它们

导入{
组成部分，
奥尼特，
模板引用
}从“@angular/core”开始；
进口{
路由器
}来自“@angular/router”；
进口{
BsModalService
}来自“ngx引导/模式”；
进口{
BsModalRef
}来自“ngx引导/modal/bs-modal-ref.service”；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:'./application dashboard.component.html'，
样式URL:['./应用程序仪表板.component.css']
})
导出类ApplicationDashboardComponent实现OnInit{
modalRef:BsModalRef；
构造函数（专用路由器：路由器，专用modalservice:BsModalService）{}
ngOnInit（）{}
createApp（模板：TemplateRef）{
this.modalRef=this.modalservice.show（模板）；
}
}

创建应用程序
创建新的应用程序定义
&时代；
您需要为新的应用程序定义提供一个名称，同时可能需要添加一个描述

应用程序定义名称
应用程序定义键
描述
取消
创建新的应用程序定义

您应该创建另一个组件（我称之为子组件）并将其导入其父组件（在

.ts

文件中），然后调用子组件选择器（标记）在家长的

.html

文件中，创建您想要的任何内容。

您正在将angular 1与angular混合使用。您可以用angular 4@chellappany给出解决方案吗？您需要路由相关或简单的东西显示html页面吗？我想您没有理解我的问题@karnamuthukumar我想在另一个html页面中显示一个html页面，如果条件允许的话如果我点击一个按钮或链接，并且我的项目在一个单独的文件夹中包含一些常见的html页面和modals，我希望它只使用基本的东西。我不进口任何其他产品。谢谢你的建议@MalinduSandaruwan

import { MatDialog } from '@angular/material';
 ....
 public dialog;

 constructor(public dialog: MatDialog) {}

     openSomeModal() {
         const data = {};
         const dialogRef = this.dialog.open(yourModalComponent, {
             data: data,
             width: '400px',
             panelClass: 'any-class',
         });
    }
.....