在Angular 2-7中,可以使用Angular的路由功能来在同一URL上隐藏/显示组件。以下是一种常见的解决方法:
npm install @angular/router
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
// other imports
RouterModule.forRoot([
{ path: 'component1', component: Component1 },
{ path: 'component2', component: Component2 },
// add other components and paths as needed
])
],
// other module configurations
})
export class AppModule { }
Component 1
Component 2
在父组件的模板中使用
标签来显示被激活路由的组件。
最后,在需要隐藏/显示的组件的模板中添加相应的内容。
使用这种方法,当用户点击链接时,Angular的路由器会根据URL的路径来决定哪个组件显示。